原生小程序上传图片：如何解决部分多张图片上传失败的问题？

Question

大佬们，问一下原生小程序上传图片，如果newData = dataDict[1]
为什么只能把type为5的传上去，后面那一组就传不上去了。最后一张图是后端要的数据格式

    uploadImg (fileList,fileList1,fileList2,fileList3) {      // 定义一个对象字典，存储不同的数据     const dataDict = {       0: {         Pics: [           { type: 1, pic: fileList },           { type: 2, pic: fileList1 },           { type: 3, pic: fileList2 },           { type: 4, pic: fileList3 }         ]       },       1: {         Pics: [           { type: 5, pic: fileList },           { type: 6, pic: fileList1 }         ]       },     };     const newData = dataDict[this.data.ofIndex] || { Pics: [] };     const data = newData;     let UpUrl;     var config =(wx.getStorageSync('config'));      if (this.data.ofIndex == 0 || this.data.ofIndex == 1 || this.data.ofIndex == 2 || this.data.ofIndex == 3) {       UpUrl = config.host+'/api/GL/AddXMGLSectionInf';       console.log("121",UpUrl);     } else if (this.data.ofIndex == 4 || this.data.ofIndex == 5) {       UpUrl = config.host+'/api/GL/AddXMGLSectionInfFireHydrantValvePitMap';     }     data.Pics.forEach((picObj, picIndex) => {       return picObj.pic.forEach((picItem, index) => {         console.log("picObj---->",picObj);         let formData = {           [`Pics[${picIndex}].type`]: picObj.type,            'ProjectNo': this.data.projectsNumber,           'ProjectName': this.data.projectsName,           'Source': this.data.Source,           'ProjectType': 2         };         wx.uploadFile({           url: UpUrl,           filePath: picItem.url,           name: `Pics[${picIndex}].Pic`,           formData: formData,           success(res) {             console.log("上传成功", res);             // 上传成功后的处理逻辑           }         });       });     });       },

我尝试过把 [Pics[${picIndex}].type]: picObj.type, 改为Pics[${Index}].type]: picObj.type, name: Pics[${picIndex}].Pic,改为name: Pics[${Index}].Pic，这样只能传每组的第一张，后面几张就传不上去了。希望大佬可以帮我解决

Answer 1

你的问题是关于原生小程序上传多张图片时，只有部分图片能够成功上传。根据你提供的代码，我注意到你在上传文件时使用了异步的 wx.uploadFile 方法，但你没有处理这些异步调用之间的并发问题。

在你的代码中，你遍历了 data.Pics 中的每一个 picObj，然后在每一个 picObj 中又遍历了 picItem，对每个 picItem 调用了 wx.uploadFile 方法。由于 wx.uploadFile 是异步的，这意味着所有的上传请求几乎是同时发出的，而不是按照你期望的顺序一个接一个地发出。这可能会导致服务器无法处理这么多并发的请求，从而导致部分请求失败。

为了解决这个问题，你需要控制这些异步请求的并发数。一种常见的做法是使用 Promise 和 async/await 来控制并发。

下面是一个修改后的代码示例，我使用了 Promise.all 来并发上传图片，但限制了最大并发数：

uploadImg (fileList, fileList1, fileList2, fileList3) {  const dataDict = {    // ...（与原代码相同）  };    const newData = dataDict[this.data.ofIndex] || { Pics: [] };  const data = newData;    let UpUrl;    // ...（与原代码相同）    const uploadPromises = [];  data.Pics.forEach((picObj, picIndex) => {    picObj.pic.forEach((picItem, index) => {      const formData = {        [`Pics[${picIndex}].type`]: picObj.type,         'ProjectNo': this.data.projectsNumber,        'ProjectName': this.data.projectsName,        'Source': this.data.Source,        'ProjectType': 2      };            const uploadTask = wx.uploadFile({        url: UpUrl,        filePath: picItem.url,        name: `Pics[${picIndex}].Pic`,        formData: formData      });            uploadPromises.push(new Promise((resolve, reject) => {        uploadTask.success(res => {          console.log("上传成功", res);          resolve(res);        });                uploadTask.fail(err => {          console.error("上传失败", err);          reject(err);        });      }));    });  });    // 限制最大并发数为3  const concurrentUploads = 3;  const uploadGroups = [];  for (let i = 0; i < uploadPromises.length; i += concurrentUploads) {    const group = uploadPromises.slice(i, i + concurrentUploads);    uploadGroups.push(Promise.all(group));  }    Promise.all(uploadGroups).then(() => {    // 所有图片上传完成  }).catch(err => {    // 至少有一个图片上传失败    console.error("至少有一个图片上传失败", err);  });}

在这个修改后的代码中，我创建了一个 uploadPromises 数组来存储所有的上传 Promise。然后，我创建了一个 uploadGroups 数组，将 uploadPromises 分成多个小组，每个小组包含最多 concurrentUploads 个 Promise。然后，我使用 Promise.all 来并发执行每个小组的 Promise。这样，就可以控制并发的上传请求数量，避免因为服务器无法处理过多的并发请求而导致部分请求失败。

请注意，你需要根据你的服务器性能和实际需求来调整 concurrentUploads 的值。如果服务器能够处理更多的并发请求，你可以增加这个值。如果服务器无法处理太多的并发请求，你可能需要减小这个值。