小程序多图上传

最新推荐文章于 2022-01-25 15:42:37 发布

转载最新推荐文章于 2022-01-25 15:42:37 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c2f18b0f265da61241595c9

文章标签：

#json

多张图片上传代码方法function：

  uploadimg: function (data) { // 2M
    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: { //这里是上传图片时一起上传的数据
        scope: 'qpp', 
        auth: 'Px50C^t*&k7mGSnu'
      },
      success: (res) => {
        var data = JSON.parse(res.data)
        let uploadimgPath = []
        uploadimgPath.push(data.data.items.file[0].filename);
        wx.setStorageSync('uploadimgPath', uploadimgPath);
        success++; //图片上传成功，图片上传成功的变量+1
        console.log(res.data)
        console.log(i);
        //这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1 
      },
      fail: (res) => {
        fail++; //图片上传失败，图片上传失败的变量+1
        console.log('fail:' + i + "fail:" + fail);
      },
      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);
        }
      }
    });
  },
复制代码

使用：

    app.uploadimg({
        url: `接口地址`,
        path: arrList //这里是选取的图片的地址数组
    });
    
遍历图片获得新数组：
    let that = this;
    let arrList = []; // 数据内的团图片
    for (var value of that.data.list.pictures) {
      arrList.push(value.url)
    }复制代码

转载于:https://juejin.im/post/5c2f18b0f265da61241595c9