el-upload 必填校验
时间: 2023-11-06 19:00:55 浏览: 141
el-upload 组件是饿了么前端团队开发的一个文件上传组件,它可以用于上传文件到服务器。如果你想要进行必填校验,可以通过设置 `el-upload` 的 `before-upload` 属性来实现。你可以在这个属性的回调函数中进行校验,如果校验未通过,可以返回 `false` 来阻止文件上传。
以下是一个示例代码,展示了如何在 el-upload 中进行必填校验:
```html
<template>
<el-upload
class="upload-demo"
action="/file/upload"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:auto-upload="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500K = file.size / 1024 < 500;
if (!isJPG || !isLt500K) {
this.$message.error('只能上传jpg/png文件,且不超过500kb');
return false;
}
return true;
},
handleSuccess(response, file) {
this.$message.success('文件上传成功');
},
handleError(error, file) {
this.$message.error('文件上传失败');
},
},
};
</script>
```
阅读全文