1、需求:表单与文件上传设置必输项校验
2、思路:直接将文件上传放在form表单中,特别注意需要将文件列表定义在表单数据中或进行转存,否则会有2个数据来源,数据校验就检测不到文件列表的变化,造成无法同时校验。
3、代码
<a-form
ref="form"
:model="formState"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
:rules="rules"
>
<a-row>
<a-col :span="18">
<a-form-item name="xuanzechanpinxian" label="产品" labelAlign="right">
<a-select v-model:value="formState.xuanzechanpinxian">
<a-select-option value="1">T</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row style="line-height: 32px">
<a-col :span="18">
<a-form-item name="fileList" label="上传文件" labelAlign="right">
<a-upload
v-model:file-list="fileList"
name="文件上传"
action=""
:customRequest="upDown"
:beforeUpload="beforeUpload"
@remove="removeFile"
accept=".xlsx,.xls"
>
<a-button> 选择文件 </a-button>
</a-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-space style="display: flex; flex-direction: row; justify-content: center">
<a-button type="primary" @click="submitSure">确定</a-button>
<a-button @click="cancel">取消</a-button>
</a-space>
//表单数据
interface myObject {
xuanzechanpinxian: string;
fileList: any[];
}
const formState = ref<myObject>({
xuanzechanpinxian: '',
fileList: [],
});
const rules = {
xuanzechanpinxian: [
{
required: true,
trigger: 'change',
},
],
fileList: [
{
required: true,
message: '请上传文件',
trigger: 'blur',
},
],
};
// 文件上传测试
import { message } from 'ant-design-vue';
// 检查文件类型,如果文件类型正确,则继续上传,false指停止上传,true指继续上传,file是文件
const beforeUpload = (file) => {
//检查文件类型是否为Excel
const isExcel =
file.type === 'application/vnd.ms-excel' ||
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!isExcel) {
message.error('只能上传Excel文件!');
return false;
}
return true;
};
// 导入文件
const upDown = async (file) => {
const random = Math.random();
const fileName = `${random}${file.file.name}`;
// OSS上传签名
queryAutograph({}).then(async (res) => {
const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;
const address = dir + fileName;
const url = host;
const formData = new FormData();
formData.append('key', address);
formData.append('OSSAccessKeyId', OSSAccessKeyId);
formData.append('Signature', Signature);
formData.append('policy', policy);
formData.append('success_action_status', success_action_status);
formData.append('file', file.file);
// 上传OSS
try {
await uploadOss({ url, formData });
} catch (e) {
message.error('上传失败');
return;
}
//拼接地址
downloadUrl.value = host + '/' + address;
let list: any = [];
list.push({ name: file.file.name, url: downloadUrl });
fileList.value = list;
formState.value.fileList = fileList.value; //转存到表单数据中,便于校验
});
};
// 删除文件
const removeFile = (file) => {
const index = fileList.value.indexOf(file.file);
const newFileList = fileList.value.slice();
newFileList.splice(index, 1);
fileList.value = newFileList;
formState.value.fileList = []; //转存到表单数据中,便于校验
};
//确定
const form = ref();
const submitSure = () => {
form.value
.validateFields()
.then((values) => {
console.log('验证通过,表单数据为:', values);
})
.catch((errorInfo) => {
console.log('验证失败,错误信息为:', errorInfo);
});
};