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

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

注意点： 必须是post请求 ，

<a-buttontype="primary"style="float: right;margin: 4px 0px 0px 15px"@click="clickImport">批量导入</a-button><!-- 批量导入 --><a-modalv-model:visible="importVisible":maskClosable="false"title="批量导入"width="50%":afterClose="closeImport"><divstyle="width: 80%;margin: 0px auto"><a-upload-draggerv-model:fileList="fileList"name="file":remove="handleRemove":before-upload="beforeUpload"><pclass="ant-upload-drag-icon"><InboxOutlined/></p><pclass="ant-upload-text">将文件拖到此处或点击上传</p><pclass="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-buttontype="primary"@click="bulkImport":disabled="fileList.length === 0":loading="uploading">{{
          uploading ? '导入中' : '开始导入'
        }}</a-button></template></a-modal>

// 类型接口interfaceFileItem{
  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>('')// 保存上传文件fileconst importFlie=ref<any>()-------------------方法-------------------------------------------// 点击批量导入functionclickImport(){
      importVisible.value=true;}// 移除要导入的文件functionhandleRemove(file: FileItem){const index= fileList.value.indexOf(file);const newFileList= fileList.value.slice();
      newFileList.splice(index,1);
      fileList.value= newFileList;};// 导入前functionbeforeUpload(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;}// 点击确定导入asyncfunctionbulkImport(){const formData=newFormData();
      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)}}// 下载导入文件asyncfunctionDownImportFile(){await dataManagementApi.downImportErrorFile(props.wellInformation.id,dataObject.value.id,hrefFile.value,dataObject.value.requestUrl);}// 关闭导入弹窗functioncloseImport(){
      importVisible.value=false,
      successTip.value='',
      failTip.value='',
      hrefFile.value='',
      fileList.value=[];search('sousuo');// 掉一次查询接口}