上传图片

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
	}

手机不显示base64图片问题

1、换行符\r \n

但是实际操作还需要注意一个点，base64码可能过长，过长的情况就可能存在换行符\r \n，所以我们就需要把换行符给处理掉

let base64 = 'data:image/jpeg;base64,/9h/5SAESkZJTgA......'
this.imageSrc = base64.replace(/[\r\n]/g, "")

2、ios不同

接口获取到的base64在安卓和ios是不同的。
安卓需要拼接’data:image/png;base64,‘而ios自带’data:image/jpg;base64,’
所以需要进行判断区分两种状态

<image :src="codeUrl"></image>
	
export default {
		data() {
			return {
				codeUrl:'',
				}
			},
		methods: {
		//这里写获取验证码请求...成功时如下:
		success: function(res) {
			var codeImgUrl=res.data
			if (codeImgUrl.indexOf('data:image') != 0) {                       
				 //判断是否有前缀/没有则拼接(图片类型png,jpg按自己返回参数情况修改)                                              
				 codeImgUrl= 'data:image/png;base64,' +  codeImgUrl
			 }                
			that.codeUrl= codeImgUrl
			console.log('验证码',res.data)//打印结果如下图
		},
	}
}
			

3、使用正则去掉双引号

var reg = /^["|'](.*)["|']$/g;
this.aaa = vm.base64img.replace(reg,"$1");

4、如果没有前缀还得手动拼接

data:image/png;base64,