el-upload 校验必选
时间: 2023-06-28 15:04:13 浏览: 83
vue结合el-upload实现腾讯云视频上传功能
您可以使用 `before-upload` 属性来校验 el-upload 是否必选。在 `before-upload` 方法中,可以对上传的文件进行校验,如果校验失败,则返回 false,上传不会进行。例如:
```html
<el-upload
class="upload-demo"
ref="upload"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:auto-upload="false"
:show-file-list="false">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
type="success"
@click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
beforeUpload(file) {
if (this.fileList.length === 0) {
this.$message.error('请先选择文件');
return false;
}
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG || !isLt2M) {
this.$message.error('上传图片只能是 JPG/PNG 格式,且不超过 2MB');
return false;
}
return true;
},
handleSuccess(response) {
this.$message.success('上传成功');
},
handleError(error) {
this.$message.error('上传失败');
},
submitUpload() {
this.$refs.upload.submit();
}
}
};
</script>
```
在上面的例子中,我们通过在 `before-upload` 方法中判断 `fileList` 的长度来校验 el-upload 是否必选。如果 `fileList` 数组为空,则提示用户先选择文件,并返回 false 阻止上传。如果 `fileList` 不为空,则对上传的文件进行校验,如果校验失败,则返回 false 阻止上传。
阅读全文