【小程序教程】微信小程序多文件上传之upload封装及异步解决

一、引言

在微信小程序中，多文件上传是一个常见的需求。用户需要上传多个文件时，通常会使用微信提供的 wx.chooseImage 或 wx.uploadFile 等API。然而，对于多次上传文件的需求，我们可能需要封装一个upload函数来处理这种操作。此外，由于网络请求是异步的，我们还需要处理异步问题，以确保上传文件的顺序和正确性。

二、封装Upload函数

首先，我们需要封装一个upload函数。这个函数需要接收一个url和文件对象作为参数，并返回一个promise对象，以便我们可以使用 .then 和 .catch 方法来处理上传成功和失败的情况。

function upload(url, file) {  
  return new Promise((resolve, reject) => {  
    wx.uploadFile({  
      url: url,  
      filePath: file.tempFilePath,  
      name: 'file',  
      formData: {  
        'user': 'test'  
      },  
      success (res){  
        const data = res.data;  
        const status = res.status;  
        if (status === 200) {  
          console.log(data);  
          resolve(data);  
        } else {  
          reject(new Error('upload failed'));  
        }  
      },  
      fail(e){  
        console.log(e);  
        reject(new Error('upload failed'));  
      }  
    })  
  });  
}

三、封装多文件上传函数

接下来，我们需要封装一个多文件上传函数。这个函数需要接收一个url、一个包含文件对象的数组和一个上传完成的回调函数作为参数。这个函数会遍历文件数组，依次上传每个文件，并在所有文件上传完成后调用回调函数。

function uploadFiles(url, files, callback) {  
  let uploadPromises = [];  
  for (let i = 0; i < files.length; i++) {  
    uploadPromises.push(upload(url, files[i]));  
  }  
  Promise.all(uploadPromises).then(() => {  
    callback();  
  }).catch((error) => {  
    console.log(error);  
  });  
}

四、处理异步问题

在多文件上传的情况下，我们还需要处理异步问题。由于网络请求是异步的，我们无法保证文件的上传顺序和正确性。为了解决这个问题，我们可以使用一个队列来管理上传文件的顺序。具体来说，我们可以使用一个数组来存储待上传的文件，并在每个文件上传完成后，从数组中移除该文件。同时，我们还可以使用 async/await 来确保上传文件的顺序。下面是一个示例代码：

async function handleUpload() {  
  const files = [file1, file2, file3]; // 待上传的文件数组  
  const queue = [...files]; // 创建文件队列  
  while (queue.length > 0) {  
    const file = queue.shift(); // 取出第一个文件  
    try {  
      await upload(url, file); // 上传文件  
    } catch (error) {  
      console.log(error); // 处理上传失败的情况  
    }  
  }  
}

五、调用Upload函数进行文件上传

最后，我们可以调用封装好的Upload函数进行文件上传。例如，我们可以先将待上传的文件存储在一个数组中，然后调用uploadFiles函数将所有文件上传到服务器。

const files = [file1, file2, file3]; // 待上传的文件数组  
uploadFiles(url, files, () => {  
  // 所有文件上传完成后的回调函数  
  console.log('All files have been uploaded.');  
});

六、错误处理和日志记录

在实际应用中，我们还需要进行错误处理和日志记录。例如，我们可以使用try/catch语句来捕获和处理上传失败的情况，并使用console.log语句记录上传成功和失败的信息。此外，我们还可以使用第三方日志库（如wx.logger）来进行更详细的日志记录和分析。

总结：通过封装Upload函数和处理异步问题，我们可以更方便地进行多文件上传。在实际应用中，我们还需要注意错误处理和日志记录等问题，以确保上传文件的正确性和可追踪性。