Element-upload手动上传文件以及限制文件类型及大小
根据项目需求只能把上传功能做成手动上传
![在这里插入图片描述](https://img-blog.csdnimg.cn/20eb814d58d147c28d5c35284b8240ea.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5,size_16,color_FFFFFF,t_70)
手动上传只需设置
:auto-upload = "false"
限制文件格式及大小写在了on-change
钩子中
uploadImageChange(file, fileList) {
this.fileList = fileList;
/* 判断图片格式以及大小 */
/* 查找 . 最后出现的位置 并提取字符串 +1 为了解决substring()方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。*/
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
const whiteList = ["jpg", "png"];
const isLt5M = file.size / 1024 / 1024 > 5;
const isSuffix = whiteList.indexOf(fileSuffix) === -1;
if (isSuffix) {
this.$message.error(this.$t('images_class'), "error");
/* 验证不通过删除此文件 */
const currIdx = this.fileList.indexOf(file);
this.fileList.splice(currIdx, 1);
return;
}
if (isLt5M) {
this.$message.error(this.$t('images_size'), "error");
const currIdx = this.fileList.indexOf(file);
this.fileList.splice(currIdx, 1);
return;
}
},