el-upload 初步过滤文件不生效
时间: 2023-09-04 22:10:48 浏览: 133
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
如果您使用的是 Element UI 的 el-upload 组件,在上传文件之前进行文件类型过滤可以通过设置 accept 属性来实现。例如,如果您只想允许上传图片文件,可以将 accept 属性设置为 "image/*"。
如果您已经设置了 accept 属性但是初步过滤文件不生效,可能是因为您没有设置 before-upload 属性来进行更细致的过滤。before-upload 属性接受一个函数,该函数将在上传文件之前执行,您可以在该函数中判断文件类型、大小等信息,并返回一个布尔值来决定是否继续上传文件。
以下是一个示例代码:
```
<el-upload
action="/your/upload/url"
:accept="'image/*'"
:before-upload="beforeUpload"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
...
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('只能上传 JPG/PNG 格式的图片');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB');
return false;
}
return true;
}
}
```
在上面的示例中,我们设置 accept 属性为 "image/*",并在 beforeUpload 方法中对文件类型和大小进行了判断。如果文件类型或大小不符合要求,我们将返回 false 来阻止上传文件,并弹出相应的提示信息。
如果您仍然无法解决问题,请提供更多的代码和具体的问题描述,以便更好地帮助您解决问题。
阅读全文