小程序上传多张图片

tech2023-02-23  98

小程序上传多张照片

由于小程序api接受一张一张上传,所有利用递归方法,直到多张上传完成。 如有问题可留言(该方法没有封装)

<!-- wxml 可自己写页面,也可复制下面代码 --> <view class='up-pic' style="padding-bottom:100rpx;"> <view class='row pic-box'> <text class="file_title">上传照片:</text> <block wx:key="imgbox" wx:for="{{picArr}}"> <view class='add-pic'> <image class='add-pic' src="{{item}}" data-index="{{index}}" bindtap="picPreview"></image> <view class='img-de' bindtap="deleteImg" data-index="{{index}}"> x </view> </view> </block> <view class='add-pic'> <view class='btn' bindtap='chooseImage'>+</view> </view> </view> </view> /* wxss 可自己写页面,也可复制下面代码 */ .up-pic{ width: 100%; padding-bottom: 200rpx; justify-content: center; background: #fff; } .pic-box{ flex-flow:wrap; width:95%; margin-bottom: 30rpx; } .ap-box{ position: relative; } .add-pic{ width: 108rpx; height: 108rpx; margin-right: 20rpx; position: relative; margin: 20rpx 30rpx 20rpx 30rpx; } .file_title { padding: 0rpx 60rpx; display: block; width: 100%; } //js 才是关键 // 相机选择图片或者拍照 chooseImage(e) { let that = this wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { wx.showLoading({ title: '正在上传', }) var tempFilePaths = res.tempFilePaths; //最多九张,所有的照片url都在这个数组里 var length = res.tempFilePaths.length; //总共个数 var i = 0; //由于小程序需要一张一张上传,所有要递归 that.uploadPic(tempFilePaths,i,length) //选中照片后调用上传接口 } }) }, uploadPic(filePaths,i,length){ let that = this var token = wx.getStorageSync('token') || '' wx.uploadFile({ url: myUrl.httpUrl+'/attachment/uploadFile', // 接口,替换成自己的就行 filePath: filePaths[i], name: 'file', header: { 'content-type': 'multipart/form-data;charset=UTF-8', 'token': token }, formData: { method: 'POST' //请求方式 }, success: (res) => { let data = JSON.parse(res.data) if(res.statusCode == 200){ if(data.code == 200){ that.setData({ saveIdPic: that.data.saveIdPic.concat(data.data), //上传成功后接口返回的id,保存时后台需要 }) // 成功后显示的照片,filePaths为照片的所有url,获取照片时拿的 if(i == length-1) { that.setData({ picArr: that.data.picArr.concat(filePaths) }) } }else if(data.code == 3000 || data.code == 2008){ //接口状态码,可自行判断 wx.showToast({ title: data.msg, image: '../../images/iconalert.png', duration:1500 }) setTimeout(function(){ wx.redirectTo({ url:'/pages/login/login' }) },1500) }else{ wx.showToast({ title: data.msg, image: '../../images/iconalert.png' }) } }else{ wx.showToast({ title: data.msg, image: '../../images/iconalert.png' }) } }, fail: (res) => { wx.hideLoading(); wx.showToast({ title: res, image: '../../images/iconalert.png' }) }, complete: () => { //重点,i这里递归,如果一次上传多张,则一张一张的调用,直到上传所有照片 i ++; if(i == length) { wx.hideLoading() } else { //重新调用上传接口 that.uploadPic(filePaths,i,length); } }, });
最新回复(0)