Uniapp 上傳 base64 圖片

                                                  Uniapp 上傳 base64  圖片

---

之前通過 純 vue 項目做過類似，功能 但是發現在 Uniapp for App 端 不好使！又看了 別人的代碼； 又只能在 微信小程序 中跑；

經過爬坑： 功能實現 在此記錄下過程：

好多 人用  uni.getFileSystemManager() ：但是不能在 APP 和 H5 中使用；

 

正解：

//選擇圖片
onSelect() {
	 
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: function(res) {
			console.log('res.tempFilePaths:', res.tempFilePaths);
			detailImage( res.tempFilePaths[0], (data)=>{
                            //base64 圖片內容就是  data
                        })
		}.bind(this)
	});
},

detailImage(path, callback) {
	// #ifdef APP-PLUS
	plus.io.resolveLocalFileSystemURL(path, function(entry) {
		entry.file(function(file) {
			var fileReader = new plus.io.FileReader();
			//alert("getFile:" + JSON.stringify(file));
			fileReader.readAsDataURL(file);
			fileReader.onloadend = function(evt) {
				// console.log(JSON.stringify(evt.target.result)); ////base64字符串  
				callback(evt.target.result);
			}
		})
	})
	// #endif


	// #ifdef H5
	var img = new Image();
	img.src = path;
	img.onload = function() {
		//默認按比例壓縮
		var w = this.width,
			h = this.height;
		var quality = 0.95; // 默認圖片質量爲0.7

		//生成canvas
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');

		// 創建屬性節點
		canvas.setAttribute("width", w);
		canvas.setAttribute("height", h);

		ctx.drawImage(this, 0, 0, w, h);
		// quality值越小，所繪製出的圖像越模糊
		var base64 = canvas.toDataURL('image/jpeg', quality);
		// 回調函數返回base64的值
		callback(base64);
	};
	// #endif
}

• 這裏 區分下  APP 和 H5 就可以了
• 獲取到 base64 圖片內容之後 上傳就可以了； 這個base64 是在文件頭的