本篇内容介绍了“Element组件beforeUpload上传前限制失效问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在before-upload（上传文件之前的钩子 参数为上传的文件 若返回 false 或者返回 Promise 且被 reject 则停止上传）钩子里去做判断 这里有一个坑
当你设置了 :auto-upload="false" 的时候， 这个钩子是不会被触发的，因此也可以在on-change中做判断。
计算
安全
数据库
网络和加速
企业服务
beforeUpload(file, fileList) {
if (file.size / (1024 * 1024) > 500) { // 限制文件大小
this.$message.warning(`当前限制文件大小不能大于500M`)
return false
}
let suffix = this.getFileType(file.name) //获取文件后缀名
let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件类型，根据情况自己定义
if (suffixArray.indexOf(suffix) === -1) {
this.$message({
message: '文件格式错误',
type: 'error',
duration: 2000
})
this.$refs.uploadPhoto.handleRemove(file);
}
return suffixArray
},
getFileType(name) {
let startIndex = name.lastIndexOf('.')
if (startIndex !== -1) {
return name.slice(startIndex + 1).toLowerCase()
} else {
return ''
}
}:on-change="changeImgClick"方法 和 before-upload 发生了冲突 导致before-upload 方法不起作用
如果有:auto-upload="false" 属性就要用:on-change 方法监听
当文件超过20MB的时候让他提示文件大小不能超过20MB，请重新上传。
下面我们来看代码：
<el-upload
class="upload-demo" ref="upload" name="upload" :action="action()"
:on-change="(file, fileList) => {handleChange(file, fileList, scope);} "
:on-remove=" (file, fileList) => {handleRemove(file, scope);}"
:file-list="scope.row.fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="mini" type="primary" v-if="scope.row.fileList.length == 0" >上传文件</el-button>
</el-upload>首先在el-upload的:on-change事件里的handleChange的方法中可以获取上传文件的大小
handleChange(file, fileList, scope) {
//获取上传文件大小
let imgSize = Number(file.size / 1024 / 1024);
if (imgSize > 20) {
this.$msgbox({
title: "",
message: "文件大小不能超过20MB，请重新上传。",
type: "warning",
});
this.materialList[scope.$index].fileList.splice(scope.index, 1);
return;
}
//后面可以不用 我自己也没有用到
this.text = "上传中";
this.loading = true;
this.materialList[scope.$index].fileList.push(file);
let data = new FormData();
data.append("files", file.raw);
uploadFile(data, scope.row.materialName).then((response) => {
if (response.success) {
this.loading = false;
this.listedFiles[scope.$index] = response.result[0].id;
} else {
this.loading = false;
this.msgError(response.message || "操作失败");
}
});
},“Element组件beforeUpload上传前限制失效问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/xiaoleiv9/article/details/124478225
