微信小程序下载照片，进度条实时追踪，轻松搞定！

2023-12-04 04:52:12

如何从微信小程序下载照片？

在微信小程序中下载照片是一个常见需求，例如下载用户头像、商品图片或其他需要在小程序内处理的图片。本文将逐步指导您完成下载照片并实时显示下载进度的过程。

步骤 1：获取临时文件路径

要下载照片，您需要先获取其临时文件路径。可以使用 wx.downloadFile API，它将返回一个 Promise，其中包含临时文件路径。

wx.downloadFile({
  url: '图片 URL',
  success: function (res) {
    const tempFilePath = res.tempFilePath;
    // 在这里处理图片
  }
});

步骤 2：显示下载进度

在下载过程中，您可以使用 wx.onProgressUpdate API 监听下载进度。这将返回一个回调函数，该函数在下载过程中每隔一定时间调用一次，并提供已下载的字节数和总字节数。

wx.downloadFile({
  url: '图片 URL',
  success: function (res) {
    const tempFilePath = res.tempFilePath;
  },
  fail: function () {
    // 下载失败处理
  },
  complete: function () {
    // 下载完成处理
  },
  onProgressUpdate: function (res) {
    // 进度更新处理
    const progress = res.progress;
    const totalBytes = res.totalBytesSent;
    const receivedBytes = res.totalBytesWritten;
  }
});

步骤 3：处理下载的图片

一旦获得临时文件路径，就可以处理下载的图片。您可以使用 wx.saveImageToPhotosAlbum API 将图片保存到相册，或者使用其他 API 在小程序中处理图片。

wx.saveImageToPhotosAlbum({
  filePath: tempFilePath,
  success: function () {
    // 保存成功处理
  }
});

代码示例

以下是完整代码示例，用于下载照片并实时显示下载进度：

wx.downloadFile({
  url: '图片 URL',
  success: function (res) {
    const tempFilePath = res.tempFilePath;
    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: function () {
        // 保存成功处理
      }
    });
  },
  fail: function () {
    // 下载失败处理
  },
  complete: function () {
    // 下载完成处理
  },
  onProgressUpdate: function (res) {
    // 进度更新处理
    const progress = res.progress;
    const totalBytes = res.totalBytesSent;
    const receivedBytes = res.totalBytesWritten;
    // 更新进度条
  }
});