uniapp：小程序將 base64 圖片字符串保存到手機相冊

一、需求分析

用戶提供的是 Base64 格式的圖片數據，而小程序保存圖片到本地通常需要的是臨時文件路徑。

第一步可能需要將 Base64 數據轉換成臨時文件，然後再保存到手機相冊。

第二步查閱 UniApp 的文檔，關於保存圖片到相冊的相關 API，uni.saveImageToPhotosAlbum。這個 API 的參數需要一個文件路徑，需要先將 Base64 轉換成臨時文件路徑。另外，Base64 數據通常以 "data:image/png;base64," 開頭，這部分在轉換時需要去掉，只保留編碼部分。

第三步在 UniApp 中，可以使用 uni.getFileSystemManager() 的 writeFile 方法，將 Base64 數據寫入臨時路徑。不過要注意，Base64 數據需要轉換成 ArrayBuffer，需要用到 uni.base64ToArrayBuffer 方法。

二、解決方案

  1. 去除 Base64 頭部信息

    提取純數據部分，確保正確解碼。

  2. 轉換爲 ArrayBuffer

    使用 UniApp 提供的 base64ToArrayBuffer 方法轉換數據。

  3. 寫入臨時文件

    將數據寫入小程序的臨時目錄，生成臨時文件路徑。

  4. 保存到相冊

    調用 uni.saveImageToPhotosAlbum 並處理權限和結果。

三、示例

testSaveBase64ToPhotoAlbum.vue 代碼

<template>
    <view>
        <button class="btn" @click="handleSaveImage()">保存到相冊</button>
    </view>
</template>
<script>
export default {
    data(){
        return {
            base64Img:""
        }
    },
    onLoad(options){
        // this.base64Img = this.getBase64Image();
    },
    methods: {
        saveBase64ToPhotoAlbum(base64Data) {
			// 1. 去除Base64頭部信息（如："data:image/png;base64,"）
			const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
			// 2. 轉換爲ArrayBuffer
			const arrayBuffer = uni.base64ToArrayBuffer(base64);
			// 3. 生成臨時文件路徑
			const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;
			// 4. 寫入文件
			const fs = uni.getFileSystemManager();
			return new Promise((resolve, reject) => {
				fs.writeFile({
				filePath,
				data: arrayBuffer,
				encoding: 'binary',
				success: () => {
					// 5. 保存到相冊
					uni.saveImageToPhotosAlbum({
					filePath,
					success: () => resolve('保存成功'),
					fail: (err) => reject('保存失敗，請檢查權限：' + err.errMsg),
					});
				},
				fail: (err) => reject('文件寫入失敗：' + err.errMsg),
				});
			});
		},
		// 調用示例
		async handleSaveImage() {
			try {
				// 示例Base64數據，實際替換爲你的數據
				const base64 = this.getBase64Image();
				await this.saveBase64ToPhotoAlbum(base64);
				uni.showToast({ title: '保存成功', icon: 'success' });
				console.error("保存圖片成功");
			} catch (error) {
				console.error("保存圖片失敗 error：", error);
				uni.showToast({ title: error, icon: 'none' });
				// 處理權限被拒絕的情況
				if (error.includes('authorize')) {
				uni.openSetting({}); // 引導用戶打開權限設置
				}
			}
		},
		getBase64Image(){
			return "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoK";// 替換完整的Base64圖片字符串
		}
    }
}
</script>
<style scoped>
    .btn {
        width: 100px;
        background-color: blue;
        border-radius: 16px;
		color: white;
        font-size: medium;
        font-weight: bold;
        text-align: center;
		padding: 0 0 0 0;
        margin: 26px;
    }
</style>

四、注意事項

  1. 用戶觸發

    保存操作必須由用戶主動觸發（如點擊按鈕），否則 iOS 可能攔截。

  2. 權限處理

    首次調用會彈窗請求權限。

    若用戶拒絕，捕獲錯誤並引導前往設置開啓：

    uni.openSetting({});

  3. 文件格式

    根據 Base64 的 MIME 類型（如 image/png）動態設置文件後綴，確保系統正確識別。

  4. 臨時路徑

    使用 wx.env.USER_DATA_PATH 獲取小程序文件系統根目錄，避免路徑問題。

  5. 性能優化

    大圖片轉換可能耗時，建議添加加載提示：

uni.showLoading({ title: '保存中...' });
// 保存完成後
uni.hideLoading();
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/eJUutcVUukVj3Le8MHbTmw

猜你喜歡