uni-app小程序保存base64图片到相册

傷城~ 2022-11-18 13:45 306阅读 0赞

如果直接用wx.downloadFile方法保存base64图片会有报错提示，我们使用uni.FileSystemManager.writeFile 将 ArrayBuffer 写为本地用户路径的二进制图片文件来下载base64图片

**直接上代码：**

<image :src='img_' mode="widthFix"></image>
    
    <button @click="saveAlbum()">保存至相册</button>

//保存相册
    			saveAlbum(){ 
    				uni.getSetting({ //获取用户的当前设置
    					success:(res)=> { 
    						if(res.authSetting['scope.writePhotosAlbum']){ //验证用户是否授权可以访问相册
    							this.saveImageToPhotosAlbum();
    						}else{ 
    							uni.authorize({ //如果没有授权，向用户发起请求
    								scope: 'scope.writePhotosAlbum',
    								success:()=> { 
    									this.saveImageToPhotosAlbum();
    								},
    								fail:()=>{ 
    									uni.showModal({ 
    										content:'检测到您没打开保存图片的权限，是否去设置打开？',
    											confirmText: "确认",
    											cancelText:'取消',
    											success: (res) => { 
    												if(res.confirm){ 
    													uni.openSetting({ 
    														success: (res) => { 
    															console.log(res);
    															// this.getLocation();
    														}
    													})
    												}else{ 
    													console.log('取消');
    													return false;
    												}
    											}
    									})
    									setTimeout(()=>{ 
    										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
    											success:(res2)=> { 
    												// console.log(res2.authSetting)
    											}
    										});
    									},3000);
    								}
    							})
    						}
    					}
    				})
    
    			},
    			saveImageToPhotosAlbum(){ 
    				let base64=this.img_.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
    				let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
    				uni.getFileSystemManager().writeFile({ 
    					filePath:filePath ,  //创建一个临时文件名
    					data: base64,    //写入的文本或二进制数据
    					encoding: 'base64',  //写入当前文件的字符编码
    					success: res => { 
    						uni.saveImageToPhotosAlbum({ 
    							filePath: filePath,
    							success: function(res2) { 
    								// title: '保存成功',
    							},
    							fail: function(err) { 
    								// console.log(err.errMsg);
    							}
    						})
    					},
    					fail: err => { 
    						//console.log(err)
    					}
    				})
    			}