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 }); }
原文地址:https://www.cnblogs.com/hongchenzimo/p/10834204.html