问题记录：el-upload已上传图片未回显问题

<div style="display: flex; justify-content: flex-start">
    <el-upload
        :limit="limitCount"
        ref="upload"
        action=""
        drag
        :on-change="handleChange"
        list-type="picture-card"
        :on-preview="handlePreview"
        :before-upload="beforeAvatarUpload"
        :on-remove="
           (file) => {
             return handleRemove(file, 'attachmentPath');
           }"
        :http-request="
        (file) => {
            return handleUpload(file, 'attachmentPath');
                                        }"
        :file-list="shipperAttachmentList"
        :class="{ hide: hideUpload }"
        >
        <div class="uploadtips">
            <i class="iconfont icon-a-zu50" style="font-size: 25px; color: #c0c4cc"></i>
        </div>
    </el-upload>
</div>

问题一：编辑时，图片回显失败

解决方法：

file-list：上传文件列表对象数组中的key必须用name、url，否则无法回显图片

问题二：上传图片是，若图片格式不正确依旧会显示该图片，实际该图片并未上传

解决方法：挂载前终止图片上传

 

 

public beforeAvatarUpload(file) {
        let imgType = file.name.split('.').pop();
        let allowType = ['jpg', 'jpeg', 'png', 'gif', 'tiff'];
        if (allowType.indexOf(imgType.toLowerCase()) === -1) {
            this.$message.error('不支持该文件类型');
            return false;
        }
    }