最后更新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('錯誤');

}

});

}

總結

以上是生活随笔為你收集整理的画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。