问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小胡子的胡萝卜
    32
    新手上路，请多包涵

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

        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，这样只能传每组的第一张，后面几张就传不上去了。希望大佬可以帮我解决

    小程序
    阅读 623
    avatarAI BotBETA

    你的问题是关于原生小程序上传多张图片时，只有部分图片能够成功上传。根据你提供的代码，我注意到你在上传文件时使用了异步的 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 的值。如果服务器能够处理更多的并发请求，你可以增加这个值。如果服务器无法处理太多的并发请求，你可能需要减小这个值。

    1 个回答
    得票最新
    头像
    清蒸鱼学编程
      1.1k22577

      报的什么错呢？还有看下网络面板那里实际发起的请求

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题