天天看点

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

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