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
});
}