在 Vue 3 中对 `el-upload` 组件进行表单校验，可参考以下几种方法。 ### 上传前校验 在 `el-upload` 组件中使用 `:before-upload` 属性，在上传前进行校验。可使用 `:disabled` 属性控制上传按钮的状态。示例代码如下： ```vue <template> <el-upload ref="upload" :action="actionUpload" :data="uploadForm" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :limit="10" :before-upload="beforeUpload" :file-list="fileList" :disabled="uploadDisableds" :show-file-list="false" :on-progress="handleProgress" class="upload-demo" multiple accept=".xls,.xlsx" > <el-button slot="trigger" size="small" type="primary" @click="handleUploadSheet">上传工资表</el-button> </el-upload> </template> <script setup> import { ref } from 'vue'; const upload = ref(null); const actionUpload = ref('your_upload_url'); const uploadForm = ref({}); const headers = ref({}); const fileList = ref([]); const uploadDisableds = ref(false); const handleUploadSheet = () => { // 假设这里有一个表单验证 // this.$refs['uploadForm'].validate((valid) => { // if (valid) { // uploadDisableds.value = false // } else { // uploadDisableds.value = true // } // }) }; const beforeUpload = (file) => { // 这里进行上传前的校验逻辑 const isXLS = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; if (!isXLS) { // 校验不通过 return false; } return true; }; const handleSuccess = (response, file, fileList) => { // 处理上传成功逻辑 }; const handleError = (err, file, fileList) => { // 处理上传失败逻辑 }; const handleProgress = (event, file, fileList) => { // 处理上传进度逻辑 }; </script> ``` ### 表单非空校验 在 `el-form` 中使用 `el-upload` 时，可通过 `prop` 绑定和 `rules` 配置进行非空校验。示例代码如下： ```vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item label="文件:" style="width: 300px" prop="fileList"> <el-upload v-model="form.fileList" align="left" drag class="upload-demo" :auto-upload="false" :data="fileData" :action="upload()" :on-change="handleChange" :on-remove="handleRemove" multiple :limit="1" :file-list="fileList" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">保存</el-button> </el-form-item> </el-form> </template> <script setup> import { ref } from 'vue'; const form = ref({ fileList: [] }); const rules = { fileList: [ { required: true, message: '请上传文件', trigger: 'change' } ] }; const fileList = ref([]); const fileData = ref({}); const handleChange = (file, fileList) => { // 处理文件选择变化逻辑 }; const handleRemove = (file, fileList) => { // 处理文件移除逻辑 }; const submitForm = (formName) => { const formRef = this.$refs[formName]; formRef.validate((valid) => { if (valid) { // 表单校验通过，可进行提交操作 } else { // 表单校验不通过 } }); }; </script> ``` ### 清除校验提示信息 在有 `el-upload` 的 `el-form-item` 上添加 `ref`，然后在 `on-success` 方法中清除对应的校验提示信息。示例代码如下： ```vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item ref="uploadFormItem" label="文件:" style="width: 300px" prop="fileList"> <el-upload v-model="form.fileList" align="left" drag class="upload-demo" :auto-upload="false" :data="fileData" :action="upload()" :on-change="handleChange" :on-remove="handleRemove" multiple :limit="1" :file-list="fileList" :on-success="handleSuccess" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">保存</el-button> </el-form-item> </el-form> </template> <script setup> import { ref } from 'vue'; const form = ref({ fileList: [] }); const rules = { fileList: [ { required: true, message: '请上传文件', trigger: 'change' } ] }; const fileList = ref([]); const fileData = ref({}); const uploadFormItem = ref(null); const handleChange = (file, fileList) => { // 处理文件选择变化逻辑 }; const handleRemove = (file, fileList) => { // 处理文件移除逻辑 }; const handleSuccess = (response, file, fileList) => { // 清除校验提示信息 uploadFormItem.value.clearValidate(); }; const submitForm = (formName) => { const formRef = this.$refs[formName]; formRef.validate((valid) => { if (valid) { // 表单校验通过，可进行提交操作 } else { // 表单校验不通过 } }); }; </script> ```