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

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

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

class="upload-poster"

action="https://jsonplaceholder.typicode.com/posts/"

:show-file-list="false"

:on-change="imgPreview"

:auto-upload="false">

用on-change 文件上传状态钩子 来监控是否已经选取了图片文件，文件值改变调用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('请选择图片文件');

}

},

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

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

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

image.png