uni-app图片选择转base64问题，H5与APP端相关实现

前言

本文章是基于uni-app的uView去实现的。

<u-upload ref="uUpload"  
	:max-size="5 * 1024 * 1024" 
	action="/"
	max-count="1"
	:before-upload="beforeUpload"></u-upload>

H5

beforeUpload(index, list) {		
	return new Promise((resolve, reject) => {
	    // list[0].file.path 就是图片的路径
		this.$pathToBase64(list[0].file.path).then(res => {
			//一些逻辑操作
			// res就是base64字符串
			resolve()
		}).catch(e => {
			console.log(e)
		})
	}).catch(e => {
		reject(e)
	})
	return false
},
// 在main.js文件当中
//图片转base64
Vue.prototype.$pathToBase64 = (url) =>{
	return new Promise((reslove,reject) => {
		uni.request({
			url: url,
			method:'GET',
			responseType:'arraybuffer',
			success: ress => {
				let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
				base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
				reslove(base64)
			},fail: (e) => {
				reject("图片转换失败");
			}
		})
	})
}

APP端

在App端当中，以上的list[0].file.path 就是图片的路径会变成file://的本地绝对路径。我们通过plus.io的相关Api去操作。

beforeUpload(index, list) {		
	const reader = new plus.io.FileReader();
	// list[0].file.path 为file:// ....
	plus.io.resolveLocalFileSystemURL( list[0].file.path, entry => {
		entry.file(file => {
			reader.onloadend = e => {
			    //一些逻辑操作
			    // e.target.result就是base64字符串
			};
			reader.readAsDataURL(file);
		}, function ( e ) {
			console.log( e.message );
		} );
	}, e => {
		console.log(e)
	} );
	return false
},