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

新入职公司，新团队实训练手项目，后端没有提供单独的图片上传接口，需要用form/data 形式表单字段和图片文件一起提交，element UI 的上传组件默认需要启用action。
在选取图片文件后为了不让它默认上传，可以在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 文件上传状态钩子 来监控是否已经选取了图片文件，文件值改变调用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上。
这样就实现了，没有默认自动上传，并且有了图片缩略图预览。