uniapp如何实现图片下载功能

在uniapp中如何实现图片下载功能？我在H5端和App端都试了uni.downloadFile，但下载后的图片无法保存到本地相册，Android和iOS兼容性也不一样，请问有没有完整的实现方案？需要处理权限申请和保存到相册的完整代码示例。

2 回复

使用uni.downloadFile下载图片，再用uni.saveImageToPhotosAlbum保存到相册。注意：需在manifest.json中配置相册权限，H5端需用户手动触发下载。


在 UniApp 中实现图片下载功能，主要通过 uni.downloadFile API 将远程图片下载到本地临时路径，再配合 uni.saveImageToPhotosAlbum 保存到相册。以下是详细步骤和代码示例：

实现步骤：

  1. 下载图片到本地临时路径：使用 uni.downloadFile 下载远程图片。
  2. 保存到相册：通过 uni.saveImageToPhotosAlbum 将临时图片保存到设备相册（注意：需用户授权）。

完整代码示例：

// 在方法中调用下载函数
downloadImage() {
  // 替换为你的图片URL
  const imageUrl = 'https://example.com/image.jpg';
  
  // 1. 下载图片到临时路径
  uni.downloadFile({
    url: imageUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        // 2. 保存到相册
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({ title: '保存成功', icon: 'success' });
          },
          fail: (err) => {
            console.error('保存失败:', err);
            uni.showToast({ title: '保存失败', icon: 'none' });
          }
        });
      }
    },
    fail: (err) => {
      console.error('下载失败:', err);
      uni.showToast({ title: '下载失败', icon: 'none' });
    }
  });
}

注意事项：

  • 权限处理：在 App 端和部分安卓设备上，首次保存可能需要用户授权相册权限。可通过 uni.authorize 提前申请：
    uni.authorize({
  scope: 'scope.writePhotosAlbum',
  success: () => this.downloadImage()
});
  • 网络图片限制：确保图片 URL 支持跨域访问（如配置 CORS）。
  • 路径格式：filePath 必须是本地临时路径（通过下载 API 获取）。

适用平台：

  • 全端支持（App、H5、小程序），但 H5 端可能因浏览器限制无法直接保存到相册（通常触发浏览器下载）。

通过以上方法，即可在 UniApp 中实现图片下载并保存到相册的功能。

回到顶部