uniapp 小程序获取后端的二进制保存到手机相册

uniapp 小程序获取后端的二进制流显示图片

以下代码演示了如何使用 `uni.request` 发起 GET 请求，并处理返回的文件流数据。

复制代码

uni.request({
      url: "https://xxx.xxx.cn/bank/file/xxx/aeb9beb4fb2444ff80d47ed11c18b991.jpg",
      method: 'GET',
      responseType: 'arraybuffer',
      header:{
        Authorization:"Bearer e2589fc8-8748-481b-8ec4-c63df33e4371"
      },
      success: res => {
        let datas = res.data;
        this.codeUrl =  'data:image/png;base64,'+uni.arrayBufferToBase64(datas);
      },
    });

主要就是将响响应的数据类型修改成 arraybuffer

最后使用uni.arrayBufferToBase64()方法将 ArrayBuffer 对象转成 Base64 字符串

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

去除 Base64 头部信息
提取纯数据部分，确保正确解码。

转换为 ArrayBuffer
使用 UniApp 提供的 base64ToArrayBuffer 方法转换数据。

写入临时文件
将数据写入小程序的临时目录，生成临时文件路径。

保存到相册
调用 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>

用户触发
保存操作必须由用户主动触发（如点击按钮），否则 iOS 可能拦截。

权限处理
首次调用会弹窗请求权限。
若用户拒绝，捕获错误并引导前往设置开启：
uni.openSetting({});

文件格式
根据 Base64 的 MIME 类型（如 image/png）动态设置文件后缀，确保系统正确识别。

临时路径
使用 wx.env.USER_DATA_PATH 获取小程序文件系统根目录，避免路径问题。

性能优化
大图片转换可能耗时，建议添加加载提示：

uniapp 小程序获取后端的二进制 保存到手机相册

uniapp 小程序获取后端的二进制流显示图片

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

uniapp 小程序获取后端的二进制保存到手机相册