uni-app 相机相册选择图片转base64

￡神魔★判官ぃ 2021-12-15 22:19 1246阅读 0赞

**uni-app 相机相册选择图片转base64**

一、base64 需求说明：  
后端上传图片接口，是post请求。接口如下：

二、接口规则  
请求方法：POST  
请求数据类型：JSON

请求头(HEADER)  
1、时间戳  
2、token  
3、sign

请求参数(BODY)  
images array\[string\] ：图片base64的数组  
imageType string : 1:头像 2：·业务图片

请求示例：  
请求:  
\{  
“images”:\[“p1”,“p1”,“p2”\],  
“imageType”:1  
\}

成功返回:  
\{  
“code”:“200”,  
“msg”:“Success”,  
“response”: \{  
“sub\_code”: “200”,  
“sub\_msg”: “Success”,  
“content”: \[  
"图1绝对url ",  
"图2绝对url “,  
“图3绝对url "  
\]  
\},  
“sign”:””  
\},

三、上传图片  
这样子就暂时不能使用uni-app 官方的uni.uploadFile 上传的相关方法咯。  
uni.uploadFile 上传，可以参考下面文章  
[https://blog.csdn.net/Neil\_1993/article/details/89680940][https_blog.csdn.net_Neil_1993_article_details_89680940]

网络官方组件库看了很多组件，都是如下代码

uni.getFileSystemManager().readFile(\{  
filePath: res.tempFilePaths\[0\], //选择图片返回的相对路径  
encoding: ‘base64’, //编码格式  
success: res => \{ //成功的回调  
let base64 = ‘data:image/jpeg;base64,’ + res.data //不加上这串字符，在页面无法显示的哦  
that.imageList.push(base64);  
\}  
\});

但是我这边是app,使用时候，提示没有权限。后来找到了，app使用的不是这个方法。  
具体如下：  
plus.io.resolveLocalFileSystemURL(chooseImageRes.tempFilePaths\[0\], function(entry)\{

下面是：选择相机相册的整个方法  
变量解释：  
imageList： 本地图片路径 数组  
imageBase64List： base64格式的图片 数组

async changeImage() \{  
console.log(“需要修改头像”);  
uni.chooseImage(\{  
count: 1, //默认9  
sizeType: \[‘original’, ‘compressed’\], //可以指定是原图还是压缩图，默认二者都有  
sourceType: \[‘album’, ‘camera’\], //从相册选择  
success: (chooseImageRes) => \{  
// 下面 本地地址ok  
this.imageList = chooseImageRes.tempFilePaths;  
//\#ifdef APP-PLUS  
plus.io.resolveLocalFileSystemURL(chooseImageRes.tempFilePaths\[0\], function(entry)\{  
// 可通过entry对象操作test.html文件  
entry.file( function(file)\{  
var fileReader = new plus.io.FileReader();  
fileReader.readAsDataURL( file );  
fileReader.onloadend = function(evt) \{  
that.imageBase64List = that.imageBase64List.concat(evt.target.result);  
that.uploadImage(that.imageBase64List);  
\}  
\})  
\})  
//\#endif  
\}  
\});  
\},

[https_blog.csdn.net_Neil_1993_article_details_89680940]: https://blog.csdn.net/Neil_1993/article/details/89680940