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

发布于:2025-06-28 ⋅ 阅读:(15) ⋅ 点赞:(0)

前提条件:微信小程序要想实现保存图片到本地相册需要到微信公众平台--小程序--开发管理中配置服务器域名中的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 H5
	uni.showModal({
		content:"长按保存壁纸",
		showCancel:false
	})
	// #endif
	
	// #ifndef H5
	uni.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官网


网站公告

今日签到

点亮在社区的每一天
去签到