微信小程序实现上传多张图片、删除图片


Posted in Javascript onJuly 29, 2020

最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图

效果图:

微信小程序实现上传多张图片、删除图片

本来用的是小程序提供的 mp-uploader 上传图片的组件,无奈次组件删除效果不是我想要的,只能用 wx.chooseImage进行上传图片,在使用uplaodFile将图片发送给后台服务器。

下面直接展示代码:

wxml:

<view class="con_titles">
 <view class="con_left">
 <image src="../../images/comint.png"></image>
 <text class="titles_t">患者病历</text>
 </view>
 <view class="img_num">{{imgShow.length}}/6</view>
 
 </view>
 <view class="page__bd">
 <!-- <mp-uploader style='color:#353535' bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="6" title="患者病历"></mp-uploader> -->
 
 <view class="add-image">
 <view class="images-boxc" wx:for="{{imgShow}}" wx:for-item="item" wx:key="image">
 <image class="image_size" data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image>
 <image class="delete-image" data-index="{{index}}" src="../../images/delete_img.png" bindtap="deleteImage"></image>
 </view>
 <view class="images-add" wx:if="{{imgShow.length<6}}">
 <image class="image_size image_sizen" src="../../images/add_img.png" bindtap="chooseImage"></image>
 </view>
 </view>
</view>

wxss:

/* 上传图片 */
.images-boxc {
 position: relative;
 border: dashed 1px #bfbfbf;
 width: 139rpx;
 height: 139rpx;
 margin-right: 32rpx;
 margin-bottom: 32rpx;
}
.delete-image {
 position: absolute;
 width: 30rpx;
 height: 30rpx;
 right: 16rpx;
 top: 16rpx;
}
.add-image {
 display: flex;
 flex-wrap: wrap;
}
.image_size {
 width: 139rpx;
 height: 139rpx;
}
.image_sizen {
 height: 142rpx;
}

js:

data: {
 count: 6, //设置最多6张图片
 
 allImg: [],
 imgShow: [],
 
 },
// 上传图片
 chooseImage: function() {
 wx.showLoading({
 title: '加载中...',
 mask: true
 })
 var that = this;
 var imgShow = that.data.imgShow;
 var count = that.data.count - imgShow.length; //设置最多6张图片
 wx.chooseImage({
 count: count,
 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function(res) {
 console.log(res)
 that.uplaodFile(res)
 for (var i = 0, h = res.tempFilePaths.length; i < h; i++) {
 imgShow.push(res.tempFilePaths[i]);
 that.setData({
 imgShow: imgShow
 })
 }
 wx.hideLoading({
 title: '加载中...',
 mask: false
 })
 
 }
 })
 },
 // 删除图片
 deleteImage(e) {
 let self = this;
 let index = e.target.dataset.index;
 let imgShow = self.data.imgShow;
 let allImg = self.data.allImg;
 allImg.splice(index, 1);
 imgShow.splice(index, 1);
 this.setData({
 imgShow: imgShow,
 allImg: allImg
 })
 },
 previewImage: function(e) {
 console.log(this.data.files)
 wx.previewImage({
 current: e.currentTarget.id, // 当前显示图片的http链接
 urls: this.data.files // 需要预览的图片http链接列表
 })
 },
 selectFile(files) {
 console.log('files', files)
 // 返回false可以阻止某次文件上传
 },
 uplaodFile(files) {
 console.log('upload files', files)
 let that = this
 files.tempFilePaths.forEach(element => {
 util.uploadFile('/fastdfsServer/fileUpload', element, 'file', {}, function(res) { //上传本地图片地址到服务器 返回地址 存放到input提交时取值
 res = JSON.parse(res);
 if (res.responseCode == 0) {
 sysMsg.sysMsg("上传成功", 1000, 'success');
 that.setData({
 allImg: that.data.allImg.concat(res.responseBody)
 });
 } else {
 sysMsg.sysMsg("上传失败", 1500, 'error');
 }
 });
 
 });
 // 文件上传的函数,返回一个promise
 return new Promise((resolve, reject) => {
 resolve({
 urls: files.tempFilePaths
 });
 setTimeout(() => {
 reject('some error')
 }, 10000)
 
 })
 
 },
 uploadError(e) {
 console.log('upload error', e.detail)
 },
 uploadSuccess(e) {
 // this.setData({
 // allImg: this.data.allImg.concat(e.detail.urls[0])
 // });
 console.log('upload success', e.detail, e.detail.urls)
 
},

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
微信小程序动态增加按钮组件
Sep 14 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
一些PHP的面试题
2015/05/06 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
毕业生机械建模求职信
2013/10/14 职场文书
社团活动策划书范文
2014/01/09 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
市场总监岗位职责
2015/02/11 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle