el-upload accept不起作用
时间: 2023-09-04 18:10:55 浏览: 152
vue-cli3.0+element-ui上传组件el-upload的使用
5星 · 资源好评率100%
如果您在使用 `el-upload` 组件时设置了 `accept` 属性,但是上传时仍然可以选择不符合该属性要求的文件,可能是因为您使用的浏览器版本不支持该属性。
为了解决这个问题,您可以通过在 `before-upload` 事件中手动过滤文件类型来实现限制上传文件类型的功能,示例代码如下:
```html
<el-upload
:before-upload="beforeUpload"
:action="uploadUrl"
>
<el-button>点击上传</el-button>
</el-upload>
```
```javascript
export default {
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
if (!isJPG && !isPNG) {
this.$message.error('只能上传 JPG/PNG 格式的文件');
return false;
}
return true;
},
},
};
```
在 `before-upload` 事件中,我们可以获取到正在上传的文件对象,通过判断文件的类型来决定是否允许上传该文件,如果不允许上传,则返回 `false`,否则返回 `true`。如果返回 `false`,则上传过程会被中止并显示错误信息。
阅读全文