elementui手动上传文件校验
时间: 2023-09-04 13:09:39 浏览: 104
vue中使用elementUI组件手动上传图片功能
ElementUI 提供了一个 `before-upload` 属性来对上传的文件进行校验。在上传文件前,可以对文件进行大小、格式、数量等方面的校验。
示例代码:
```html
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
```javascript
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
```
在 `beforeUpload` 方法中,首先对上传的文件类型进行判断,如果不是 `image/jpeg` 格式,则弹出错误提示。接着对上传的文件大小进行判断,如果超过 2MB,则也弹出错误提示。最后返回一个布尔值,表示是否允许上传该文件。
注意,如果不返回 `true`,则上传不会执行。如果需要上传多个文件,可以在 `beforeUpload` 方法中加入判断文件数量的逻辑。
阅读全文