UniApp中,上传图片后获取的数据通常为:
{ "file":[ { "type":"image", "url":"blob:http://localhost:8080/92f5347a-af52-4312-95e0-bca29140b3fa", "thumb":"blob:http://localhost:8080/92f5347a-af52-4312-95e0-bca29140b3fa", "size":5499, "name":"身份证(1).jpg" } ], "name":"1", "index":0 }
其中临时图片地址为:"url":"blob: http://localhost:8080/92f5347a-af52-4312-95e0-bca29140b3fa ",
将地址转换为Base64格式的数据方式如下,适用于小程序,H5,App:
ploadFilePromise(url) {
// #ifdef MP-WEIXIN
uni.getFileSystemManager().readFile({
filePath: url, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符,在页面无法显示的哦
this.imgBase64URL=base64
},fail: (e) => {
console.log("图片转换失败");
// #endif
// #ifdef H5
uni.request({
url: url,
method:'GET',
responseType:'arraybuffer',
success: ress => {
let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64
base64 = 'data:image/jpeg;base64,' + base64 ;
this.imgBase64URL=base64
},fail: (e) => {
console.log("图片转换失败");
// #endif
// #ifdef APP-PLUS
plus.io.resolveLocalFileSystemURL(url, ( entry )=> {
// 可通过entry对象操作test.html文件
entry.file((file)=>{
let fileReader = new plus.io.FileReader();
fileReader.onloadend = (evt)=> {
const base64=evt.target.result.substr(22);
this.imgBase64URL=base64
fileReader.readAsDataURL(file);
}, ( e )=>{
alert( "Resolve file URL failed: " + e.message );
// #endif
复制代码