商品评论优雅上传：多媒体搭配Promise的完美呈现

前端

2024-02-19 15:02:34

导言：Promise的优雅邂逅

微信小程序因其轻量、便捷而受到广泛青睐，但其同时也不支持一次上传多张图片。为了解决这一限制，Promise悄然登场，凭借其异步处理特性，为小程序开发带来了优雅的解决方案。

场景再现：商品评论多媒体需求

让我们走进一个典型的场景：商品订单的评论。用户希望对多个商品进行评论，每个商品又可上传图片或视频，如何将这些需求完美结合？

优雅实现：Promise协奏曲

Promise在这里担当了优雅的指挥家，协调着多媒体上传的协奏曲。其异步处理机制允许在不阻塞主线程的情况下并行上传图片和视频。具体步骤如下：

创建Promise数组： 为每个需要上传的文件创建Promise。
上传文件： 使用wx.uploadFile API异步上传文件，并将其添加到Promise数组中。
Promise.all等待： 使用Promise.all等待所有Promise完成。
获取上传结果： 通过Promise.all的返回值获取所有上传结果。

技术细节：代码示例

以下代码示例展示了如何使用Promise实现商品评论多媒体上传：

async function uploadMedia() {
  const promises = [];
  // 遍历需要上传的文件
  files.forEach((file) => {
    // 创建Promise
    const promise = new Promise((resolve, reject) => {
      // 上传文件
      wx.uploadFile({
        url: 'YOUR_UPLOAD_URL',
        filePath: file.path,
        name: 'file',
        success: (res) => {
          // 上传成功
          resolve(res);
        },
        fail: (err) => {
          // 上传失败
          reject(err);
        },
      });
    });
    // 将Promise添加到数组
    promises.push(promise);
  });

  // 等待所有Promise完成
  const results = await Promise.all(promises);

  // 获取上传结果
  const uploadedFiles = results.map((res) => {
    return res.data;
  });

  return uploadedFiles;
}