vue 上傳圖片 input=file

 一、邏輯

 

點擊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){
                var formdata = new FormData();
                formdata.append('file',imgUrl);//下面是要傳遞的參數

                axios.post("http://xxx.com/api/file",
                    formdata,
                    {headers:{'Content-Type':'multipart/form-data'}}
                ).then((res)=>{
                    if(res.data.code === 200){
                        alert('成功上傳！');
                        this.postimg = res.data.data.url;
                    }else if(res.data.code === 401){
                        alert('未登錄')
                    }else if(res.data.code === 403){
                        alert('未授權')
                    }else if(res.data.code === 422){
                        alert('驗證失敗信息')
                    }else if(res.data.code === 500){
                        alert('系統錯誤')
                    }
                })
            },