element UI form 中的upload 已上传文件还提示必填
时间: 2024-09-13 15:03:34 浏览: 59
在Element UI的表单组件`el-form`中,如果设置了`required`属性,并且`el-upload`组件的`auto-upload`选项设置为默认值`true`(即文件上传完成后会自动提交表单),可能会遇到已上传文件但仍显示为必填的问题。
当你上传了文件后,表单会认为该字段已经有值,但实际上它仍然期望用户手动填写一些额外的信息,以便确认整个表单是否完整。解决这个问题的一种方法是:
1. 避免自动上传:设置`auto-upload`属性为`false`,然后在用户点击“确定”或者其他提交按钮时,手动触发`handleSuccess`或`handleError`事件去提交表单,此时可以判断文件是否存在,如果存在则忽略必填验证。
```html
<template>
<el-form :model="form" :rules="rules" @submit.prevent="submitForm">
<el-form-item label="图片" prop="file">
<el-upload
:action="uploadUrl"
:file-list="fileList"
:on-success="handleSuccess"
:auto-upload="false"
>
<el-button size="small">选择文件</el-button>
</el-upload>
</el-form-item>
<!-- 其他表单内容 -->
<el-form-item v-if="showRequiredMessage" :prop="'file'" :rules="{ required: false }"></el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
file: [],
},
rules: { // 表单规则
file: [{ required: true, message: '请选择图片', trigger: 'blur' }],
},
fileList: [], // 存储上传文件
showRequiredMessage: true,
uploadUrl: 'your/upload/url',
handleSuccess(file) {
this.fileList.push(file);
this.showRequiredMessage = false; // 显示已上传,不再需要必填验证
},
};
},
methods: {
submitForm() {
if (this.fileList.length > 0) {
this.$refs.form.submit();
}
},
},
};
</script>
```
阅读全文