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 并处理权限和结果。

三、示例

效果图

图1


图2

testSaveBase64ToPhotoAlbum.vue代码

四、注意事项

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

加载提示

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