uniapp：小程序将base64图片字符串保存到手机相册_uniapp保存图片到相册

一、需求分析

用户提供的是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 并处理权限和结果。

三、示例

效果图

图1

图2

testSaveBase64ToPhotoAlbum.vue代码

  保存到相册 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. 转换为ArrayBufferconst 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图片字符串} }} .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; }

四、注意事项

1. 用户触发
   保存操作必须由用户主动触发（如点击按钮），否则 iOS 可能拦截。
2. 权限处理
   首次调用会弹窗请求权限。
   若用户拒绝，捕获错误并引导前往设置开启：
   uni.openSetting({});
3. 文件格式
   根据 Base64 的 MIME 类型（如 image/png）动态设置文件后缀，确保系统正确识别。
4. 临时路径
   使用 wx.env.USER_DATA_PATH 获取小程序文件系统根目录，避免路径问题。
5. 性能优化
   大图片转换可能耗时，建议添加加载提示：

加载提示

uni.showLoading({ title: \'保存中...\' });// 保存完成后uni.hideLoading();