网站域名所有人萝岗企业网站建设

在 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）或其他需求，我们可以一起交流学习。