uni-app怎么实现点击图片保存到相册 uni-app saveImage方法-uni-app-PHP中文网

uni.saveImageToPhotosAlbum是小程序平台专用API，需先通过uni.getImageInfo获取网络图本地路径，再检查并申请scope.writePhotosAlbum权限，最后传filePath保存；H5不支持，须用标签download或Blob方案。

uni-app怎么实现点击图片保存到相册 uni-app saveimage方法

uni.saveImageToPhotosAlbum 不是 uni-app 的内置方法，正确 API 是 uni.saveImageToPhotosAlbum（注意大小写和拼写），且它仅在小程序平台（微信、支付宝、QQ 等）可用，H5 完全不支持。直接调用会报错 saveImageToPhotosAlbum is not a function。

uni.saveImageToPhotosAlbum 在小程序中怎么用

该 API 要求传入本地文件路径 filePath，不能直接传网络地址（如 https://xxx.com/a.jpg）。所以必须先「下载」或「获取」图片的本地路径。

典型流程是：uni.getImageInfo → 获取网络图的本地缓存路径 → uni.saveImageToPhotosAlbum 保存

uni.getImageInfo 支持网络图片，但微信小程序需提前在「开发管理 → downloadFile 合法域名」中配置图片所在域名，否则失败
成功回调中的 res.path 才是可传给 uni.saveImageToPhotosAlbum 的合法值
必须确保用户已授权 scope.writePhotosAlbum，否则保存失败，错误信息含 auth deny

示例代码：

saveImageToAlbum(url) {
  uni.getImageInfo({
    src: url,
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.path,
        success: () => uni.showToast({ title: '保存成功' }),
        fail: (err) => {
          if (err.errMsg.includes('auth deny')) {
            uni.showToast({ title: '请开启相册权限', icon: 'none' });
          }
        }
      });
    },
    fail: (err) => console.error('获取图片信息失败', err)
  });
}

H5 环境下点击图片怎么“保存”

H5 没有相册概念，uni.saveImageToPhotosAlbum 会直接报错或静默失效。只能触发浏览器原生下载行为，本质是「另存为」。

必须使用标签 + download 属性，且 href 必须是同域 URL 或 Blob URL
跨域图片（如 CDN 地址）无法直接下载，会触发 CORS 错误；此时要么服务端加 Access-Control-Allow-Origin: *，要么走后端代理中转
不能用 data: URL（如 base64），部分浏览器（尤其 Safari）会忽略 download 属性

安全写法（带跨域 fallback）：

saveImageForH5(url) {
  // 尝试直接下载（同域 or CORS OK）
  const link = document.createElement('a');
  link.href = url;
  link.download = 'image.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

若要支持跨域图片，得先 uni.downloadFile 拿到临时路径，再用 fetch + Blob 构造 URL（H5 可行，但注意 iOS Safari 对 Blob URL 下载限制较多）。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

为什么 saveImageToPhotosAlbum 总是失败

常见失败原因不是代码写错，而是环境/配置/权限没到位：

在 H5 页面里调用了 —— 直接无效，控制台可能无报错，但也不执行
微信小程序未配置 downloadFile 域名 —— uni.getImageInfo 报错 fail: {"errMsg":"getImageInfo:fail"}
用户首次拒绝授权，又没调用 uni.authorize 或 uni.openSetting 引导 —— 错误 errMsg: "saveImageToPhotosAlbum:fail auth deny"
传了 tempFilePath 但没等下载完成就调用保存（异步没 await / Promise 链断裂）
Android 微信 8.0.33+ 对 filePath 路径校验变严，临时路径需确保存在且可读（建议用 uni.getFileSystemManager().accessSync 验证）

调试时务必检查 console.error 输出的完整 errMsg，它比「失败」二字包含更多信息。

长按保存图片的兼容写法

uni-app 的 longpressactions 仅在小程序生效（H5 无长按菜单），所以需要条件编译区分逻辑：

// template 中
<image :src="imgUrl"></image><p>// script 中
handleLongPress() {
// #ifdef MP-WEIXIN
uni.previewImage({
urls: [this.imgUrl],
longpressActions: {
itemlist: ['保存图片'],
success: (res) => {
if (res.tapindex === 0) this.saveImageToAlbum(this.imgUrl);
}
}
});
// #endif
// #ifdef H5
this.saveImageForH5(this.imgUrl);
// #endif
}</p>

注意：H5 的长按事件在移动端浏览器上支持不稳定，部分安卓 WebView 可能不触发 @longpress，建议改用双击或按钮操作更可靠。

真正容易被忽略的是：**同一张图片在不同平台走的是完全不同的技术路径，没有银弹。写之前先明确目标平台，再决定用 getImageInfo + saveImageToPhotosAlbum 还是 + download，别混着用。**