二、前端頁面展示

三、表單代碼

     <el-dialog title="導入源數據庫表單信息" :visible.sync="dialogVisible1">
      <el-form ref="importFormRef" :model="importForm" :rules="importFormRules" label-width="130px">
        <el-form-item label="病種kgCode:" prop="kgCode" >
          <el-input v-model="importForm.kgCode" ></el-input>
        </el-form-item>
        <el-form-item label="目標數據庫URL:" prop="targetUrl" >
          <el-input v-model="importForm.targetUrl"></el-input>
        </el-form-item>
        <el-form-item label="目標數據庫賬號:" prop="targetUsername" >
          <el-input v-model="importForm.targetUsername"></el-input>
        </el-form-item>
        <el-form-item label="目標數據庫密碼: " prop="targetPassword" >
          <el-input v-model="importForm.targetPassword"></el-input>
        </el-form-item>
        <el-form-item label="上傳文件:" prop="excel">
          <el-upload
            class="upload-demo"
            ref="upload"
            action<!-- 這裡比填,異步時寫後端接口,就可以,我們不用,所以不謝-->
            :http-request="httpRequest"<!--覆蓋默認的上傳行為，可以自定義上傳的實現-->
            :before-upload="beforeUpload"<!--這是上傳前的處理方法-->
            :on-exceed="handleExceed"<!--文件超出個數限制時的鉤子-->
            :limit="1">
            <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上傳.xlsx文件，且不超過5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitImportForm">開始導入</el-button>
          <el-button type="info" @click="dialogVisible = false">關閉窗口</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

四、Data部分

     //對話框控制權
    dialogVisible1:false,
    //導入表單數據
    importForm:{
      kgCode:'',
      targetUrl:'',
      targetUsername:'',
      targetPassword:'',
    },
    //存放上傳文件
    fileList: []

五、JS方法

      // 覆蓋默認的上傳行為，可以自定義上傳的實現，將上傳的文件依次添加到fileList數組中,支持多個文件
      httpRequest(option) {
        this.fileList.push(option)
      },
      // 上傳前處理
      beforeUpload(file) {
        let fileSize = file.size
        const FIVE_M= 5*1024*1024;
        //大於5M，不允許上傳
        if(fileSize>FIVE_M){
          this.$message.error("最大上傳5M")
          return  false
        }
        //判斷文件類型，必須是xlsx格式
        let fileName = file.name
        let reg = /^.+(\.xlsx)$/
        if(!reg.test(fileName)){
          this.$message.error("只能上傳xlsx!")
          return false
        }
        return true
      },
      // 文件數量過多時提醒
      handleExceed() {
        this.$message({ type: 'error', message: '最多支持1個附件上傳' })
      },
      //導入Excel病種信息數據
      submitImportForm() {
        // 使用form表單的數據格式
        const params = new FormData()
        // 將上傳文件數組依次添加到參數paramsData中
        this.fileList.forEach((x) => {
          paramsData.append('file', x.file)
        });
        // 將輸入表單數據添加到params表單中
        params.append('kgCode', this.importForm.kgCode)
        params.append('targetUrl', this.importForm.targetUrl)
        params.append('targetUsername', this.importForm.targetUsername)
        params.append('targetPassword', this.importForm.targetPassword)
		
		//這裡根據自己封裝的axios來進行調用後端接口
        this.httpPostWithLoading(IMPORT_URL,paramsData).then(match => {
          if (match.success) {
            this.$message({
              message: "導入成功",
              type: "success"
            })
          }else{
            this.$message({
              message: "導入失敗",
              type: "error"
            })
          }
          this.$refs.importFormRef.resetFields()//清除表單信息
          this.$refs.upload.clearFiles()//清空上傳列表
          this.fileList = []//集合清空
          this.dialogVisible1 = false//關閉對話框

        })
      }

六、後端接收方式

    @PostMapping("/importExcel")
    public JsonResult importExcel(MultipartFile file, String kgCode, String targetUrl, 
    	String targetUsername, String targetPassword){
    }

七、總結

這樣就可以完成上傳的文件和表單一起請求後端接口,解決了您的問題,一鍵三聯走起來!!!謝謝大家