轉自：https://www.cnblogs.com/dudu123/p/10215813.html

<inputtype="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轉化為base64var 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);
　　　　　　　}); },

轉載于:https://www.cnblogs.com/siyecao2010/p/11408555.html

總結

以上是生活随笔為你收集整理的vue 上传图片 input=file的全部內容，希望文章能夠幫你解決所遇到的問題。

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