轉自：https://www.cnblogs.com/dudu123/p/10215813.html
<input type="file" accept="image/png,image/jpeg,image/gif,image/jpg" @change="uploadImg" ref="uploaderImg" >
一、邏輯
點擊li觸發事件chooseImage 即觸發input標簽事件photoChange
input標簽事件photoChange
file返回的是如下變量
模擬上傳表單方法
執行上傳
二、代碼
<li class="scroll-item first-item" @click="chooseImage">
<i class="iconPhoto"></i>
<span class="title">拍照</span>
<input @change="photoChange($event)" type="file" id="upload_file" multiple style="display: none"/>
</li>
chooseImage(){
document.getElementById('upload_file').click(); //觸發input-file文件上傳控件 事件photoChange
},
photoChange(el) {
var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
var type = file.type.split('/')[0];
if ( type === 'image' ){
//將圖片img轉化為base64
var reader = new FileReader();
reader.readAsDataURL(file);
var that = this;
reader.onloadend = function () {
var dataURL = reader.result;
var blob = that.dataURItoBlob(dataURL);
that.upload(blob); //執行上傳接口
};
}else{
alert('上傳了非圖片');
}
},
dataURItoBlob (dataURI) {
// base64 解碼
let byteString = window.atob(dataURI.split(',')[1]);
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
let T = mimeString.split('/')[1];
let ab = new ArrayBuffer(byteString.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
},
upload(imgUrl){
let formData = new FormData();
formData.append('file', file);
this.$axios({
method:'POST',
url:'路徑',
headers: {
'Content-Type':'multipart/form-data',//設置請求頭請求格式為JSON
},
data: formData
}).then((response)=>{
console.log("response",response);
});
},