小程序上传多张图片

小程序上传多张照片

由于小程序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);
          }
      },
  });