新入職公司忆谓，新團(tuán)隊(duì)實(shí)訓(xùn)練手項(xiàng)目斩披，后端沒(méi)有提供單獨(dú)的圖片上傳接口棠枉，需要用form/data 形式表單字段和圖片文件一起提交设褐，element UI 的上傳組件默認(rèn)需要啟用action颠蕴。
在選取圖片文件后為了不讓它默認(rèn)上傳，可以在upload組件加上 :auto-upload: "false" 屬性
<el-upload
class="upload-poster"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-change="imgPreview"
:auto-upload="false">
<img v-if="formMovie.posterURL" :src="formMovie.posterURL" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
用on-change 文件上傳狀態(tài)鉤子 來(lái)監(jiān)控是否已經(jīng)選取了圖片文件助析，文件值改變調(diào)用imgPreview方法
imgPreview (file, fileList) {
let fileName = file.name;
let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(fileName.toLowerCase())) {
this.formMovie.posterURL = file.url;
} else {
this.$message.error('請(qǐng)選擇圖片文件');
}
},
取到文件名犀被，用正則判斷是非為圖片文件。
如果是圖片文件外冀，就能到文件的本地路徑弱判，更新到圖片預(yù)覽元素的src上。
這樣就實(shí)現(xiàn)了锥惋，沒(méi)有默認(rèn)自動(dòng)上傳，并且有了圖片縮略圖預(yù)覽开伏。
image.png
