uniapp 实现多端图片下载/保存到相册

在使用 uniapp 实现下载图片（保存图片到相册）的功能时，app 端、微信小程序、h5 端分别对应不同的实现方式，所以要适配多端，可以先将函数封装成如下形式，再加分别入各端对应的代码，方便在不同的页面中调用。

在 util 文件夹中建立一个文件，添加如下代码：

export function saveImg(url) {
   // #ifdef MP-WEIXIN
   
   // #endif
   // #ifdef APP-PLUS
   
   // #endif
   // #ifdef H5
   
   // #endif
}

最终写好的函数结构如下：

App 端

App 端使用 uni.saveImageToPhotosAlbum 保存图片到相册（uni.saveImageToPhotosAlbum 不支持 h5）

uni.saveImageToPhotosAlbum({
   filePath: url,
   success: function (res) {
   },
   fail: function (err) {
   },
});

微信小程序端

微信小程需要在保存在相册之前检查是否有权限，再调用 uni.saveImageToPhotosAlbum 方法.

uni.getSetting({
   success: (res) => {
      if (!res.authSetting["scope.writePhotosAlbum"]) {
         uni.showModal({
            title: "警告",
            content: "未授权相册权限,点击确定获取授权",
            success: function (res) {
               if (res.confirm) {
                  uni.authorize({
                     scope: "scope.writePhotosAlbum",
                     success() {
                        // 同意,保存到相册
                     },
                     fail() {
                        // 拒绝授权
                     },
                  });
               }
            },
         });
      } else {
          // 保存到相册
      }
   },
   fail: () => {
      // 拒绝
   },
});

H5 端

H5 端其实就是通过 js 代码创建 a 标签，主动触发点击事件，即可将图片下载到本地文件夹

效果

小程序端：

保存的文件的临时路径以及授权成功的返回数据：

H5 端：

图片路径也可以是一段 base64

如果下载时不设置下载名称，文件名默认为“下载”