2023年12月11日发(作者：)

element-ui上传组件图片默认不上传显示图片缩略图

新入职公司，新团队实训练手项目，后端没有提供单独的图片上传接口，需要用form/data 形式表单字段和图片文件一起提交，element UI 的

上传组件默认需要启用action。

在选取图片文件后为了不让它默认上传，可以在upload组件加上 :auto-upload: "false" 属性

class="upload-poster"

action="/posts/"

:show-file-list="false"

:on-change="imgPreview"

:auto-upload="false">

用on-change 文件上传状态钩子 来监控是否已经选取了图片文件，文件值改变调用imgPreview方法

imgPreview (file, fileList) {

let fileName = ;

let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;

if ((rCase())) {

URL = ;

} else {

this.$('请选择图片文件');

}

},

取到文件名，用正则判断是非为图片文件。

如果是图片文件，就能到文件的本地路径，更新到图片预览元素的src上。

这样就实现了，没有默认自动上传，并且有了图片缩略图预览。