廢話不多說，直接看代碼吧
1、上傳組件
div class="imgbox">
img class="goodsimg" src="../../assets/addimg.png">
input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
/div>
2、展示添加上的圖片
viewimg($event) {
//獲取當(dāng)前的input標(biāo)簽
var currentObj = event.currentTarget;
//找到要預(yù)覽的圖片img標(biāo)簽，亦可動(dòng)態(tài)生成
var img = currentObj.parentNode.children[0];
setImagePreview(currentObj, img);
function setImagePreview(docObj, imgObjPreview) {
if (docObj.files docObj.files[0]) {
imgObjPreview.style.display = 'block';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
}
}
3、獲取圖片并上傳到服務(wù)器
//單張圖片上傳
var inputs = $("input.fileupload");
for (var i = 0; i inputs.length; i++) {
//圖片轉(zhuǎn)base64上傳
var file = inputs[i].files;
if (file[0]) {
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function(e) {
var event = this;
console.log(event.result);
$.ajax({
type: 'POST',
url: 'http://10.145.0.05/goods/addGoodsBase64',
dataType: "json",
data: {
"base64": event.result,
},
success: function(data) {
console.log(data);
}
});
}
}
}
好了，就是這個(gè)過程，接下來的就交給后端的同學(xué)處理了。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理
- H5上傳本地圖片并預(yù)覽功能
- H5手機(jī)端多文件上傳預(yù)覽插件
- 移動(dòng)端利用H5實(shí)現(xiàn)壓縮圖片上傳功能
- vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼
- H5移動(dòng)端圖片壓縮上傳開發(fā)流程
- H5圖片壓縮與上傳實(shí)例
- 利用H5特性FormData實(shí)現(xiàn)不刷新文件上傳
- H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能
