在 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)或其他需求,我們可以一起交流學習。