mui 获取本地的图片的绝对路径本，上传到OSS上

Posted 2021-11-28 hongchenzimo

                    mui(".img ul").on("tap", "li.addImgge", function() {
					if (mui.os.plus) {
						var a = [{
							title: "拍照"
						}, {
							title: "从手机相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "请选择图片来源",
							cancel: "取消",
							buttons: a
						}, function(b) { /*actionSheet 按钮点击事件*/
							switch (b.index) {
								case 0:
									break;
								case 1:
									getImage(); /*拍照*/
									break;
								case 2:
									galleryImg(); /*打开相册*/
									break;
								default:
									break;
							}
						})
					}
				})     

//拍照
function getImage() {
　　var c = plus.camera.getCamera();
　　c.captureImage(function(e) {
　　　　plus.io.resolveLocalFileSystemURL(e, function(entry) {
　　　　　　uploadHead(entry.toLocalURL(), entry.name); /*上传图片*/
　　　　}, function(e) {
　　　　　　console.log("读取拍照文件错误：" + e.message);
　　　　});
　　}, function(s) {
　　　　console.log("error" + s);
　　})
}
//相册
function galleryImg() {
　　plus.gallery.pick(function(paths) {
　　　　for (i in paths.files) {
　　　　　　uploadHead(paths.files[i], ""); /*上传图片*/
　　　　}
　　}, function(e) {
　　　　mui.toast(‘取消了选择‘);
　　}, {
　　　　multiple: true,
　　　　maximum: 9
　　})
}

　　这是调用本地的相册和相机,下面就是上传，在上传之前先把图片压缩为base64为编码格式，在用blob转化为arrayBuffer在上传

var imgBase64=[];
var imgBaseUrl=[];
function uploadHead(imgPath, imgName) {
	var image = new Image();
	image.src = imgPath;
	var li = document.createElement("li");
	var img = document.createElement("img");
	li.setAttribute("class","feedbackimg");
	li.index=mui(".img ul li").length;
	img.src = imgPath;
	li.appendChild(img);
	
	//alert(mui(".img ul")[0].innerhtml)
	if(mui(".img ul li").length>="6"){
		mui(".img ul li.addImgge")[0].style.display="none";
	}else{
		mui(".img ul")[0].appendChild(li);
		if(mui(".img ul li").length>="6"){
			mui(".img ul li.addImgge")[0].style.display="none";
		}
	}
	image.onload = function() {
		
		getCanvasBase64(imgPath).then(function(base640) {
			imgBase64[imgBase64.length]=base640;
			
		}, function(err) {
			console.log(err);
		});
	}
}
var deleteImg = (t) => {
	
	var index=t.index;
	imgBase64.splice((index-1),1);
	$($(".img ul li")[index]).remove();
}

	mui(".button").on("tap", "button", function() {
			mui(".mui-loading")[0].style.display="block";
			for(let i=0;i<imgBase64.length;i++){
				var urlData = imgBase64[i];
				var base64 = urlData.split(‘,‘).pop();
				var fileType = urlData.split(‘;‘).shift().split(‘:‘).pop();
				blob = toBlob(base64, fileType);
				
				
				// blob转arrayBuffer
				const reader = new FileReader();
				reader.readAsArrayBuffer(blob);
				reader.onload = function(event) {
				
					// 配置
					var client = new OSS.Wrapper({
						region: ‘oss-cn-hangzhou‘, //你的oss地址 
						accessKeyId: ‘‘, //你的ak
						accessKeySecret: ‘‘, //你的secret
						secure: true,
						//stsToken: ‘<Your securityToken(STS)>‘,//这里我暂时没用，注销掉
						bucket: ‘XXX‘ //你的oss名字
					});
				
					// 文件名
					var objectKey = `/androidApp/${new Date().getTime()}.${fileType.split(‘/‘).pop()}`;
				
					// arrayBuffer转Buffer
					var buffer = new OSS.Buffer(event.target.result);
				
					// 上传
					client.put(objectKey, buffer).then(function(result) {
						
						imgBaseUrl[imgBaseUrl.length]=result.url;
						/* e.g. result = {
							name: "Uploads/file/20171125/1511601396119.png",
							res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
							url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
						} */
					}).catch(function(err) {
						console.log(err);
					});
				}
			}
			
		
			})
function getBase64Image(img, width, height) {
	var canvas = document.createElement("canvas");
	canvas.width = width ? width : img.width;
	canvas.height = height ? height : img.height;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	var dataURL = canvas.toDataURL();
	return dataURL;
}

function getCanvasBase64(img) {
	var image = new Image();
	//至关重要
	image.crossOrigin = ‘‘;
	image.src = img;
	//至关重要
	var deferred = $.Deferred();
	if (img) {
		image.onload = function() {
			deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
			//document.getElementById("container2").appendChild(image);
		}
		return deferred.promise(); //问题要让onload完成后再return sessionStorage[‘imgTest‘]
	}
}

function toBlob(urlData, fileType) {
	let bytes = window.atob(urlData);
	let n = bytes.length;
	let u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bytes.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: fileType
	});
}