Elementui组件上传缩略图,即使上传不成功,也生成了缩略图
1.问题:最近使用的 upload 组件,有一个缩略图功能,但是使用 :http-request 方法进行文件提交,提交文件之前需要对文件类型,以及文件大小进行校验。具体代码如下
<el-upload ref="pictureUpload" :on-remove="(file,fileList)=>handleRemove(file,fileList,scope.row)" :on-change="(file,fileList)=>handleChange(file,fileList,scope.row)"
action="#" :http-request="param => uploadMethod(param,scope.row)" multiple list-type="picture-card" class="my_upload">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
// 上传文件的方法
uploadMethod(param,row){
const nameSplitArr = param.file.name.split(".") ;
let isType = row.extension.indexOf(nameSplitArr[1]) != -1 ;
if(!isType){
this.$message.error('上传文件后缀只能是 '+row.extension+' 格式!');
return Promise.reject();
}
const isLt2M = param.file.size / 1024 / 1024 < row.fileMaxSize;
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 '+row.fileMaxSize+'MB!');
return Promise.reject();
}
}
主要实现,当校验不成功的时候,不要直接 return 一个空值,否则的话虽然文件没有上传成功,但是缩略图已经存在了。应该使用 return Promise.reject();