uniapp实现远程图片下载到手机相册功能
在 UniApp 中实现点击下载图片到相册的功能,需要以下几个步骤:
1. 下载图片到本地(uni.downloadFile
)
2. 将图片保存到相册(uni.saveImageToPhotosAlbum
)
完整代码示例:
<template><view @click="downloadAndSaveImage">点击下载并保存图片</view>
</template><script>
export default {data() {return {imageUrl: 'https://example.com/your-image.jpg' // 替换为你的图片地址}},methods: {async downloadAndSaveImage() {try {// 1. 下载图片const { tempFilePath } = await new Promise((resolve, reject) => {uni.downloadFile({url: this.imageUrl,success: (res) => {if (res.statusCode === 200) {resolve(res);} else {reject(new Error('下载失败'));}},fail: (err) => {reject(err);}});});// 2. 获取相册权限await new Promise((resolve, reject) => {uni.getSetting({success: (res) => {if (!res.authSetting['scope.writePhotosAlbum']) {uni.authorize({scope: 'scope.writePhotosAlbum',success: resolve,fail: () => {uni.showToast({ title: '请开启相册权限', icon: 'none' });reject(new Error('未授权写入相册'));}});} else {resolve();}}});});// 3. 保存图片到相册await new Promise((resolve, reject) => {uni.saveImageToPhotosAlbum({filePath: tempFilePath,success: resolve,fail: (err) => {reject(err);}});});uni.showToast({ title: '保存成功' });} catch (err) {uni.showToast({ title: '保存失败', icon: 'none' });console.error(err);}}}
}
</script>
注意事项:
- 跨域问题:确保图片 URL 支持跨域访问。
- 合法域名:在小程序端使用时,图片 URL 必须配置在小程序后台的 下载域名白名单 中。
- 权限申请:首次保存需用户主动触发授权(如点击按钮),不能自动静默执行。
- 临时路径:
uni.downloadFile
返回的是临时路径,保存后可删除或复用。
可选增强功能:
- 使用
uni.getImageInfo
预加载图片信息; - 添加 loading 状态提示;
- 在 H5 端可用
<a download>
实现替代方案。
如果你有具体使用的平台(如微信小程序、H5、App)或其他需求,我们可以一起交流学习。