vue3.0 +ts +vantdesginVue 手动上传excel文件（ 不使用上传服务器功能，不支持多文件一起上传）

vue3.0 +ts +vantdesginVue 手动上传excel文件（ 不使用上传服务器功能，不支持多文件一起上传）

注意点： 必须是post请求 ，

<a-button
  type="primary"
    style="float: right; margin: 4px 0px 0px 15px"
    @click="clickImport"
    >批量导入</a-button
  >
<!-- 批量导入 -->
    <a-modal v-model:visible="importVisible" :maskClosable="false" title="批量导入" width="50%" :afterClose="closeImport">
      <div style="width: 80%;  margin: 0px auto">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <p class="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p class="ant-upload-text">将文件拖到此处或点击上传</p>
          <p class="ant-upload-hint">只支持excel文件</p>
        </a-upload-dragger>
        <p :successTip="successTip" style="margin:0px;color:green;">{{successTip}}</p>
        <p :failTip="failTip" style="margin:0px;color:red;">{{failTip}}</p>
        <a @click="DownImportFile">{{hrefFile}}</a>
      </div>
      <template #footer>
        <a-button @click="closeImport">取消</a-button>
        <a-button type="primary" @click="bulkImport"  :disabled="fileList.length === 0" :loading="uploading">{{
          uploading ? '导入中' : '开始导入'
        }}</a-button>
      </template>
    </a-modal>

// 类型接口
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  preview?: string;
  originFileObj?: any;
  file: string | Blob;
}

----------------------------定义-----------------------------------
	// 批量导入弹窗开关
    const importVisible = ref<boolean>(false);
    // 上传文件
    const fileList = ref<any>([]);
    // 导入中
    const uploading = ref<boolean>(false);
    // 导入到服务器后返回的文件名称
    const fileName = ref<string>('')
    // 导入成功数量
    const successTip = ref<string>('')
    // 导入失败数量
    const failTip = ref<string>('')
    // 下载导入文件地址
    const hrefFile = ref<string>('')
    // 保存上传文件file
    const importFlie=ref<any>()


-------------------方法-------------------------------------------
 // 点击批量导入
    function clickImport() {
      importVisible.value = true;
    }
    // 移除要导入的文件
    function handleRemove(file: FileItem){
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };
    // 导入前
    function beforeUpload(file: FileItem) {
      importFlie.value = file
      fileList.value = [...fileList.value, file];
      const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
      if (!isJpgOrPng) {
        message.error('上传图片文件格式错误!');
         nextTick(()=>{
          fileList.value=[]
        })
      }
      const isLt10M = file.size / 1024 / 1024 <= 10;
      if (!isLt10M) {
        message.error('上传的图片必须小于 10MB!');
         nextTick(()=>{
          fileList.value=[]
        })
      }
      return isJpgOrPng && isLt10M && false;
    }
  // 点击确定导入
    async function bulkImport() {
      const formData = new FormData();
      formData.append('file',importFlie.value);
      formData.append('wellId', props.wellInformation.id);
      formData.append('catalogueId', dataObject.value.id);
      let res = await dataBaseManagementApi.importInformation(formData);
      if(res.success){
        uploading.value = false;
        fileList.value = []
        successTip.value = res.obj?.successMsg;
        failTip.value = res.obj?.failedMsg;
        hrefFile.value = res.obj?.fileErrName
      }else{
        uploading.value = false;
        fileList.value = []
        successTip.value = res.obj?.successMsg;
        failTip.value = res.obj?.failedMsg;
        hrefFile.value = res.obj?.fileErrName
        message.error(res.msg)
      }
    }
    // 下载导入文件
    async function DownImportFile(){
      await dataManagementApi.downImportErrorFile(props.wellInformation.id,dataObject.value.id,hrefFile.value,dataObject.value.requestUrl);
    }

    // 关闭导入弹窗
    function closeImport(){
      importVisible.value=false,
      successTip.value = '',
      failTip.value = '',
      hrefFile.value='',
      fileList.value = [];
      search('sousuo');// 掉一次查询接口
    }