element ui el-upload 组件：确保所有文件上传成功后再提交表单
本文介绍如何在 Element UI 的 el-upload 组件中实现手动文件上传，并仅在所有文件上传成功后才提交表单。
方法一：监听上传成功事件，批量提交
通过监听 on-success 事件，并在所有文件上传完成后提交表单。 这需要一个自定义函数来检查所有文件是否都已成功上传。
// 监听上传成功事件
this.$refs['el-upload-component'].$on('on-success', async () => {
// 所有文件上传完成后提交表单
if (this.allFilesUploaded()) {
await HttpService.postRequest("/insert_smallbusiness", this.form).then();
}
});
// 检查所有文件上传状态
allFilesUploaded() {
for (const ref in this.$refs) {
if (ref.startsWith('el-upload-')) {
const upload = this.$refs[ref];
if (upload.uploadFiles.filter(file => file.status === 'success').length !== upload.files.length) {
return false;
}
}
}
return true;
}
方法二：一次性上传所有文件，并附带额外参数
如果每个文件都需要额外的参数，可以直接在提交时将这些参数一起发送。
// 提交表单，包含额外参数
this.$refs['el-upload-component'].submit({
data: {
// 额外参数
}
});
通过以上两种方法，您可以有效地管理 Element UI 的 el-upload 组件中的文件上传，确保数据完整性和表单提交的可靠性。 选择哪种方法取决于您的具体需求和后端接口设计。
