微信小程序多图片上传

版权声明：原创博文转载请注明出处 https://blog.csdn.net/sinat_38695417/article/details/85001965

小程序多图片上传

文件上传 微信小程序官方文档

这里为了方便使用，对 小程序文件上传的函数进行了 再次的封装；同时为了方便记忆，是和使用，按照微信给出的文档进行编写；
先看一下怎么使用吧！

// 选择照片
wx.chooseImage({
  success: function(res) {
    console.log(res, app.util.url('applet_img_upload'));
    // 这里把地址 和 上传照片，都放在了一个 util.js 中
    // 在 app.js 中 util: requier('utils/util.js')
    app.util.uploadFile({
      url: app.util.url('applet_img_upload'),
      filePath: res.tempFilePaths,	// 也可以传单张 res.tempFilePaths[0]，这样好像 多此一举了
      name: 'image',			// 具有默认值，可写可不写
      success: e => {
        console.log(e);
      },
      fail: err => {
        console.log(err);
      }
    })
  },
})

这里把该函数放到了 util.js 中；放到其他地方也是可以的；

/*
 * @param {Object}
 * upImageFile({url: 'test.com', filePath: ['1.png', '2.png'], name: 'image', success: res => {}, fail: err => {} })
 */
 // i 记录当前上传的图片 fileUrl 图片上传后的地址 err 记录上传失败，或错误次数
 uploadFile: function (obj, i = 0, fileUrl = [], err = 0) {
 	// 有时也可能会直接上传单张图片
   if (typeof obj.filePath === 'string') obj.filePath = [obj.filePath];
   wx.uploadFile({
     url: obj.url,					// 接收图片的地址
     filePath: obj.filePath[i],		// 图片的临时路径，由微信返回
     name: obj.name || "image",		// 对应的 key，这里设置默认 image
     success: res => {
       var resData = res.data;
       // 异常处理，有时后台返回的数据可能会有点问题，这个看需求写
       try {
         resData = JSON.parse(resData);
       }
       catch (err) {
         resData = JSON.parse(resData.substring(1));
       }
       if (resData.ec === 200) {                       // 判断上传是否成功，根据后台返回的状态判定，这里需要根据你自己后台返回的状态去判断
         i++;
         fileUrl.push(resData.data.path);              // 后台返回图片路径
         // 如果都上传完毕 直接 执行 success
         if (i === obj.filePath.length) {
           if (obj.success) obj.success({ msg: 'uploadFile:ok', data: fileUrl, statusCode: res.statusCode });
         }
         // 如果没有完成 则继续调用该函数
         else {
           this.uploadFile(obj, i, fileUrl);
         }
       }
       else {
       	// 如果没有失败，记录上传失败次数，我这里定义上传 失败 3次结束执行上传，返回失败结果，执行 fail；后续如果有需求，这块你也可以改成动态的
         err++;
         if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
         else {
           console.log('%c 返回信息：', 'color: #f00', resData)
           console.log('%c 请注意: 请求成功时，后台返回的信息可能与此函数中的配置不一致，注意修改', 'color: blue');
         }
       }
     },
     fail: err => {
     // 上传失败执行，同上
       err++;
       if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
       else {
         var errObj = { err, i, fileUrl };
         if (obj.fail) obj.fail(errObj);
         console.log('%c 图片上传失败，请注意检查...', 'color: #f00', errObj);
       }
     }
   })
 }

T.T