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

た入场券 2021-07-24 23:15 480阅读 0赞

//app.js

uploadimg(data) {
        var that = this,
          i = data.i ? data.i : 0, //当前上传的哪张图片
          success = data.success ? data.success : 0, //上传成功的个数
          fail = data.fail ? data.fail : 0; //上传失败的个数
        wx.uploadFile({
          url: data.url,
          filePath: data.path[i],
          name: 'file', //这里根据自己的实际情况改
          formData: null, //这里是上传图片时一起上传的数据
          success: (resp) => {
            success++; //图片上传成功，图片上传成功的变量+1
            console.log(resp)
            console.log(i);
            //这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1
          },
          fail: (res) => {
            fail++; //图片上传失败，图片上传失败的变量+1
            // console.log('fail:' + i + "fail:" + fail);
            console.log('fail:', res);
          },
          complete: () => {
            console.log(i);
            i++; //这个图片执行完上传后，开始上传下一张
            if (i == data.path.length) {   //当图片传完时，停止调用          
              console.log('执行完毕');
              console.log('成功：' + success + " 失败：" + fail);
            } else { //若图片还没有传完，则继续调用函数
              console.log(i);
              data.i = i;
              data.success = success;
              data.fail = fail;
              that.uploadimg(data);
            }
    
          }
        })
      },

wxml

<view class='up-pic'>
      <view class='flex pic-box'>
        <block wx:key="imgbox" wx:for="{
       {pics}}">
          <view class='ap-box'>
            <view class='add-pic'>
              <image class='add-pic' src='{
       {item}}'></image>
              <view class='img-de' data-deindex='{
       {index}}' bindtap='imgDelete1'>X
                
              </view>
            </view>
          </view>
        </block>
        <view bindtap="upimg" bindtap='choose' wx:if="{
       {pics.length<9}}" class="up">+</view>
         <view bindtap="uploadimg" wx:if="{
       {pics.length>=1}}" class="up">上传</view>
      </view>
    </view>

css

.up{
      margin:30rpx;
      height: 200rpx;
      background: #ccc;
      color: #fff;
      font-size: 100rpx;
      text-align: center;
      line-height: 200rpx
    }
    /* 上传图片 */
    .flex{
      display: flex;
    }
    .up-pic{
      /* padding:20rpx 24rpx; */
      width: 100%;
      justify-content: center;
    }
    .pic-box{
      margin-top:20rpx;
      flex-flow:wrap;
       width:95%; 
    }
    .ap-box{
       position: relative;
    }
    .add-pic{
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      position: relative;
      margin: 20rpx 30rpx 20rpx 30rpx;
    }
    /* 删除图片 */
    .img-de{
      width:45rpx;
      height:45rpx;
      border-radius:50%;
      position:absolute;
      right:-41rpx;
      top:5rpx;
    }
    .hong-contant .teamwork-btn{
      width: 360rpx;
      height: 88rpx;
      border-radius: 50rpx;
      color: white;
      background-color:#14a1fd;
      margin: 0 auto;
      margin-top: 80rpx;
      margin-bottom: 40rpx;
    }