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


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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
JS实现div居中示例
Apr 17 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
关于文本留言本的分页代码
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php进程间通讯实例分析
2016/07/11 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
jQuery中remove()方法用法实例
2014/12/25 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
numpy.where() 用法详解
2019/05/27 Python
mac使用python识别图形验证码功能
2020/01/10 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
小学语文国培感言
2014/03/04 职场文书
优乐美广告词
2014/03/14 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
个人承诺书格式范文
2015/04/29 职场文书
学校就业保障协议书
2019/06/24 职场文书