el-upload上傳文件和表單一起提交+後端接收程式碼
一、前言
我們在做前端時,會遇到這樣的需求,上傳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){
}
七、總結
這樣就可以完成上傳的文件和表單一起請求後端介面,解決了您的問題,一鍵三聯走起來!!!謝謝大家