一、前言
我們在做前端時,會遇到這樣的需求,上傳Excel檔案,並且還要和填寫的表單資料,一起傳送.我們知道el-upload預設的是選中檔案後直接請求到後端的介面.現在就需要我們修改這種預設的上傳形式,和填寫完的form表單一起請求後端介面.
二、前端頁面展示
三、表單程式碼
<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){
}
七、總結
這樣就可以完成上傳的檔案和表單一起請求後端介面,解決了您的問題,一鍵三聯走起來!!!謝謝大家