最基礎的前臺上傳圖片
阿新 • • 發佈:2019-02-13
介面展示: <el-form-item prop ="idCardFront" style="height:53px;"> <p>個人資訊頁</p> <img @click="fileClick" src="../../assets/images/uploadFile.png">//美化按鈕 <input @change="fileChange($event)" :accept="accept" type="file" id="upload_file" multiple style="display: none"/>//上傳圖片 </el-form-item> <div class="upload_warp_img" v-show="fileArray.length!=0"> <div v-for="(item,index) of fileArray" class="upload_warp_img_div"> <img :src="item.file.src" style="width: 116px;height: 78px"> </div> </div>//圖片展示
js方法:
fileClick() { document.getElementById('upload_file').click() },//點選圖片呼叫input中的方法
fileChange:function(el){ if (!el.target.files[0].size) return; this.fileList(el.target);//獲取選擇的檔案 el.target.value = '' },
fileList:function (fileList) {//判斷上傳檔案的標準 let file = fileList.files[0];//真正上傳的檔案; if(file.name.length > 50){ Msg.error("圖片名應在50個字元以內"); return; }; if(file.size > 5242880){ Msg.error("圖片大小不能超過5M"); return; } let reader = new FileReader(); let _this = this; reader.readAsDataURL(file); reader.onload = function () {//獲取檔案的src地址file.src = this.result; _this.fileArray = []; _this.fileArray.push({ file }); _this.uploadFile(file,value);//呼叫後臺介面 } },
uploadFile:function(file,value){ let _this = this; this.loading = true; let formData = new FormData(); formData.append("files", file); axios.defaults.timeout = 50000;//防止圖片過大,請求超時,傳不上去 axios.post(debug.servers+'/api/file', formData) .then(function (response) { if(response.data == undefined){ Msg.error("網路延遲,請重新上傳"); return; } if(response.data.code == '200'){ _this.loading = false; _this.singleData.idCardFront = response.data.data.fileId; } else{ Msg.error('上傳失敗') _this.loading = false; } }).catch(function (error) { _this.loading = false; console.log(error); }); }