使用場(chǎng)景，使用el-upload上傳文件，選擇文件后不立即上傳到服務(wù)器上，點(diǎn)擊提交按鈕時(shí)與其他form表單數(shù)據(jù)一起提交，類似的需求，相信有很多小伙伴遇到，可能也會(huì)遇到跟我一起的問(wèn)題，在這里記錄一下

<el-upload ?class="upload-file" ?action="" ?:on-change="handleChange"> ?<el-button size="small" type="primary">點(diǎn)擊上傳</el-button> ?<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div> </el-upload>

問(wèn)題1：el-upload文件上傳組件，設(shè)置auto-upload為false，on-change事件只觸發(fā)一次

由于原生的input type="file"不管文件上傳成功與否，已添加的文件已經(jīng)被記錄了，所以上傳文件時(shí)，不會(huì)觸發(fā)change事件，這里我們就把已經(jīng)添加的文件記錄清除來(lái)解決該問(wèn)題

html(給el-upload添加ref屬性)

<el-upload ?class="upload-file" ?ref="upload" ?action="" ?:on-change="handleChange"> ?<el-button size="small" type="primary">點(diǎn)擊上傳</el-button> ?<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div> </el-upload>

javascript(使用一個(gè)變量保存已上傳的文件)

handleChange(file) { ? ?this.file = file; ? ?this.$refs.upload.clearFiles(); // 清空文件}

問(wèn)題2：file與form表單數(shù)據(jù)一起提交

/** 保存 */saveUpload() { ? ? ?if (!this.file) return this.$message.warning('請(qǐng)選擇文件') ? ? ? ?this.param = new FormData() ? ? ? ?// 文件 ? ? ?this.param.append('file', this.file.raw, this.file.name) ? ? ? ?// ID ? ? ? ?this.param.append('id', this.id) ? ? ? ?const token = JSON.parse(localStorage.getItem("token")) || '' ? ? ? ?// 設(shè)置請(qǐng)求頭 ? ? ? ?let config = { ? ? ? ? ? ?headers: { ? ? ? ? ? ?'Content-Type': 'multipart/form-data', ? ? ? ? ? ?'Authorization': token ? ? ? ?} ? ? ?}; ? ? ?axios.post(this.uploadUrl, this.param, config).then( ? ? ? ? ? ? ?response => { console.log('res', response) }, ? ? ? ? ? ? ?err => { reject(err); } ? ? ? ?).catch((error) => { reject(error) }) }

?

至此，問(wèn)題總結(jié)記錄完畢

原文鏈接：https://www.dianjilingqu.com/759317.html