微信小程序之多图上传
小程序的upLoadFile一次只能上传一张图片，需要循环调这个接口来实现多图上传，以下是示例代码，也可以直接封装成组件调用
wxml
| 1 2 3 4 |
<view class="images" bindtap="upload"> <image src="../../images/icon_shangchuan.png"></image> <text>添加图片</text></view> |
wxss
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.images{ width: 134rpx; height: 134rpx; border:1px dashed #D8D8D8; display: flex; flex-direction: column; justify-content: center; align-items: center;}.container .images image{ width: 60rpx; height: 60rpx;} |
wx.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
upload: function (e) { var that = this; // 上传图片的提示 if (that.data.uploaderNum >= 10) return wx.showToast({ title: "最多只能上传" + '10' + "张图", duration: 2500, icon: "none" }), !1; //选择图片 wx.chooseImage({ count: 10 - that.data.uploaderNum, // 默认10 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 that.data.uploaderList.concat(res.tempFilePaths); var uploaderList = res.tempFilePaths; that.setData({ uploaderList: that.data.uploaderList.concat(res.tempFilePaths), }) that.setData({ uploaderNum: that.data.uploaderList.length }) for (var i = 0; i < uploaderList.length; i++) { wx.uploadFile({ url: getApp().globalData.url+'/api/upload/upload', filePath: uploaderList[i], name: 'file', // 需要传的参数 formData: { 'user': 'test' }, success: function (res) { that.setData({ tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path) }) } }) } } })}, |
如果您的问题还未解决可以联系站长付费协助。
有问题可以加入技术QQ群一起交流学习
本站vip会员 请加入无忧模板网 VIP群（50604020） PS:加入时备注用户名或昵称
普通注册会员或访客 请加入无忧模板网 技术交流群（50604130）
客服微信号：15898888535
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若内容侵犯了原著者的合法权益，可联系站长删除。
