廢話不多說，直接看代碼吧
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) {
//獲取當前的input標簽
var currentObj = event.currentTarget;
//找到要預覽的圖片img標簽，亦可動態生成
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、獲取圖片并上傳到服務器
//單張圖片上傳
var inputs = $("input.fileupload");
for (var i = 0; i inputs.length; i++) {
//圖片轉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);
}
});
}
}
}
好了，就是這個過程，接下來的就交給后端的同學處理了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- vuejs開發組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理
- H5上傳本地圖片并預覽功能
- H5手機端多文件上傳預覽插件
- 移動端利用H5實現壓縮圖片上傳功能
- vue中用H5實現文件上傳的方法實例代碼
- H5移動端圖片壓縮上傳開發流程
- H5圖片壓縮與上傳實例
- 利用H5特性FormData實現不刷新文件上傳
- H5實現手機拍照和選擇上傳功能
