MultipleUpload 批量上传

带模板说明、校验确认和提交流程的批量导入组件，文档环境使用本地 mock。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { MultipleUpload } from "@/components/page/multiple-upload";

const visible = ref(false);
const fields = [{ field: "name", required: "必填", description: "材料名称" }];
const mockResponse = { validCnt: 1, total: 1, invalidCnt: 0, validContent: "" };
// Local demonstration: keep the selected workbook bytes for the next step.
// This does not perform business validation or send files to a backend.
const toBase64 = (file: File): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () =>
      typeof reader.result === "string"
        ? resolve(reader.result)
        : reject(new Error("无法读取演示文件"));
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
const checkApi = async (file: File) => ({
  ...mockResponse,
  validContent: await toBase64(file),
});
const submitApi = async () => mockResponse;
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="visible = true">打开批量导入</el-button
      ><MultipleUpload
        v-model="visible"
        template-dict-key="demo"
        :field-descriptions="fields"
        :check-api="checkApi"
        :submit-api="submitApi"
      />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { MultipleUpload } from "@/components/page/multiple-upload";

Props

参数	说明	类型	默认值	必填
title	对话框标题	string	"批量导入"	否
showTempDesc	是否显示模板说明	boolean	true	否
isSelfTemplateInfo	是否自定义模板说明	boolean	false	否
fieldDescriptions	字段描述列表	FieldDescription[]	-	是
checkApi	校验文件的API方法	(file: File) => Promise<UploadResponse>	-	是
submitApi	提交文件的API方法	(file: File) => Promise<UploadResponse>	-	是
templateDictKey	模板下载的字典key	string	-	是
templateFileName	模板文件名称（用于下载无效数据时的前缀）	string	"数据"	否
dialogWidth	对话框宽度	string	"60%"	否
dialogHeight	对话框高度	string	"650px"	否
templateTip1	模板提示文字1	string	"如果您还没有导入模板，请先下载模板："	否
templateTip2	模板提示文字2	string	"请按照模板要求填写数据，确保数据格式正确。"	否
downloadButtonText	下载按钮文字	string	"下载模板"	否
modelValue	组件双向绑定值。	boolean	-	是

Events

事件名	说明	回调参数
update:modelValue	双向绑定值更新时触发。	value: boolean
cancel	取消事件	-
success	成功事件，返回提交后的响应数据	result: UploadResponse

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Types

MultipleUploadProps

组件Props

字段	说明	类型	默认值	必填
title	对话框标题	string	-	否
showTempDesc	是否显示模板说明	boolean	-	否
isSelfTemplateInfo	是否自定义模板说明	boolean	-	否
fieldDescriptions	字段描述列表	FieldDescription[]	-	是
checkApi	校验文件的API方法	(file: File) => Promise<UploadResponse>	-	是
submitApi	提交文件的API方法	(file: File) => Promise<UploadResponse>	-	是
templateDictKey	模板下载的字典key	string	-	是
templateFileName	模板文件名称（用于下载无效数据时的前缀）	string	-	否
dialogWidth	对话框宽度	string	-	否
dialogHeight	对话框高度	string	-	否
templateTip1	模板提示文字1	string	-	否
templateTip2	模板提示文字2	string	-	否
downloadButtonText	下载按钮文字	string	-	否

FieldDescription

字段描述项

字段	说明	类型	默认值	必填
field	字段名称	string	-	是
required	是否必填	string	-	是
description	字段描述说明	string	-	是

UploadResponse

上传校验/提交的响应数据

字段	说明	类型	默认值	必填
validCnt	有效数据条数	number	-	是
total	总数据条数	number	-	是
invalidCnt	无效数据条数	number	-	否
validContent	有效数据的Base64内容	string	-	否
invalidContent	无效数据的Base64内容	string	-	否

MultipleUploadEmits

组件Emits

字段	说明	类型	默认值	必填
cancel	取消事件	[]	-	是
success	成功事件，返回提交后的响应数据	[result: UploadResponse]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。