画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器

最后更新17.01.20

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

二、然后这是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('错误');

}

});

}