【MUI】选择图片并上传至服务器

最后更新17.01.20

一、首先这是HTML的代码 将要显示一张图片

<img id="my_img_id" class="my_img_class" />

二、然后这是JavaScript代码

var img_my = document.getElementById('my_img_id');

//点击添加图片 
img_my.addEventListener('tap', function() {
    
    //打开相册（这里之前很多小伙伴问我，为什么打不开，因为我用的是H5+的方式，不适用于纯web页面）
    plus.gallery.pick(
        function(path) {
            img_my.src = path; //设置img的路径

            //把图片base64编码  注意：这里必须在onload事件里执行！这给我坑的不轻
            img_my.onload = function() {
                var data = getBase64Image(img_my);    //base64编码
                var newImgbase = data.split(",")[1];  //通过逗号分割到新的编码
                imgArray.push(newImgbase);            //放到imgArray数组里面
                img_my.off('load');                   //关闭加载
                }
            },
            function(e) {
                mui.toast('取消选择');
                });
            });

//base64编码  
function getBase64Image(img) {
    var canvas = document.createElement("canvas");   //创建canvas DOM元素，并设置其宽高和图片一样
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();  //动态截取图片的格式
    var dataURL = canvas.toDataURL("image/" + ext);  //返回的是一串Base64编码的URL并指定格式
    return dataURL;
}
            

三、上传图片操作

function uploadimg() {
    
    //这里就可以把添加过图片的imgArray通过JSON解析成字符串，然后上传给服务器
    var imgJson = JSON.stringify(imgArray);
    
    mui.ajax("上传图片的地址", {
        data: {
            pic: imgJson,       
        },
        type: 'post',
        timeout: 10000,
        dataType: 'json',
        success: function(data) {
            if(data.error == 0) {   
                mui.toast('上传成功');  
            } else {
                mui.toast('上传失败:'+data.data);
            }
        },
        error: function(xhr, type, errorThrown) {
            mui.toast('错误');
        }
    });
}