uni-app项目实战笔记24--uniapp实现图片保存到手机相册

前提条件：微信小程序要想实现保存图片到本地相册需要到微信公众平台--小程序--开发管理中配置服务器域名中的downloadFile合法域名：

\uniapp提供了saveImageToPhotosAlbum API实现保存的图片到本地相册。下面是它的配置参数：

参数名	类型	必填	说明
filePath	String	是	图片文件路径，可以是临时文件路径，也可以是永久文件路径，不支持网络图片路径
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 其中filePath参数为必填参数，需要填入图片文件路径，注意：该参数不支持网络图片(例如https://www.test.com/001.jpg)。

此外：该API只支持小程序，不支持H5。

由于saveImageToPhotosAlbum不支持网络图片路径，因此需要借助uniapp另一个API：getImageInfo，下面是它的配置参数：

 参数说明

参数名	类型	必填	说明
src	String	是	图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

从上表src参数可知 ，getImageInfo支持网络图片路径。因此我们可以通过getImageInfo获取图片本地路径，再通过saveImageToPhotosAlbum下载到本地：

下面是使用示例;

//用户点击下载时触发的事件处理
const clickDownload = ()=>{// #ifdef H5uni.showModal({content:"长按保存壁纸",showCancel:false})// #endif// #ifndef H5uni.getImageInfo({src:currentInfo.value.picurl,success:(res)=>{uni.saveImageToPhotosAlbum({filePath:res.path,success:(res) =>{console.log(res)	}})}})// #endif
}

 可以通过打印日志，查看getImageInfo API返回的结果，从下图可知，图片放在path字段中返回：

知识要点：

1、上面的代码使用了条件编译，如果是H5使用弹窗告知用户下载图片的方法；

2、除H5以外，使用getImageInfo+saveImageToPhotosAlbum组合式API实现将APP上的图片下载到本地。

关于saveImageToPhotosAlbum更多信息可访问官方文档：

uni-app官网