element自定義多文件上傳觸發(fā)多次on-change問題

更新時(shí)間：2023年03月28日 09:34:51 作者：網(wǎng)館

這篇文章主要介紹了element自定義多文件上傳觸發(fā)多次on-change問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element自定義多文件上傳觸發(fā)多次on-change

由于項(xiàng)目需要，圖片上傳需要進(jìn)行壓縮之后在調(diào)用接口，那就只能走自定義上傳

自定義上傳關(guān)鍵在于：

action = #
:auto-upload="false"

<el-upload
? ? ref="upload"
? ? action="#" ?// 上傳入口改成 #
? ? :multiple="true" // 多文件上傳開啟
? ? :on-change="handleChange" // 改變監(jiān)聽
? ? :file-list="fileList" ?//文件列表
? ? :auto-upload="false" // 自動(dòng)上傳關(guān)閉
>
? ? <i class="el-icon-plus"></i>
</el-upload>?

由于 auto-upload 設(shè)置為 false 之后，before-upload 會(huì)失效，所以上傳的事件之前體現(xiàn)在 change 里。

但是這樣呢在上傳文件時(shí)無論是多圖還是單圖，在上傳后都會(huì)走2次 handleChange ，

此時(shí)我們需要一個(gè)防抖方法，來限制它。

handleChange(file, fileList) {
? /*
? ? ? 自動(dòng)上傳改成true會(huì)導(dǎo)致重復(fù)觸發(fā)，所以在handleChange上傳文件
? ? */
? // ?防抖
? let length = fileList.length
? this.maxLength = Math.max(length, this.maxLength)
? setTimeout(() => {
? ? if (length === this.maxLength) {
? ? ? // 你的上傳文件邏輯
? ? }
? }, 100)
}

this.maxLength 默認(rèn)設(shè)置 0 就行，要記得在上傳成功（完成）后需要設(shè)置為默認(rèn) 0。

下面附上我完整的代碼

change 事件

handleChange(file, fileList) {
? /*
? ? ? 自動(dòng)上傳改成true會(huì)導(dǎo)致重復(fù)觸發(fā)，所以在handleChange上傳文件
? ? */
? // ?防抖
? let length = fileList.length
? this.maxLength = Math.max(length, this.maxLength)
? setTimeout(() => {
? ? if (length === this.maxLength) {
? ? ? ? // 圖片驗(yàn)證
? ? ? this.uploadFilesVerification(fileList)
? ? }
? }, 100)
}

圖片驗(yàn)證： uploadFilesVerification

// 圖片驗(yàn)證
async uploadFilesVerification(fileList) {
? let resFileList = []
? for (const key in fileList) {
? ? console.log('fileList[key] :>> ', fileList[key])
? ? // 判斷文件大小(5M)
? ? if (fileList[key].size > 1024 * 1024 * 5) {
? ? ? this.$message.warning('圖片大小不可以超過5M')
? ? ? return
? ? }
? ? // 圖片壓縮(這里用的 lrz，項(xiàng)目不需要可以忽略)
? ? const lrzData = await lrz(fileList[key].raw, { quality: 0.5 })
? ? // 內(nèi)容驗(yàn)證
? ? // ?xxxx
?
? ? resFileList.push(lrzData.origin)
? }
?
? // 上傳圖片
? this.customUploadFn(resFileList)
?
}

自定義上傳：customUploadFn

// 自定義上傳
async function customUploadFn(fileList) {
? let form = new FormData()
? fileList.forEach((item) => {
? ? form.append('files', item)
? })
? const { data } = await uploadFiles(form) // 上傳 api 接口
? console.log('data :>> ', data)
? data.forEach((item) => {
? ? this.goodsImgList.push(item) // 圖片回顯數(shù)組
? })
? this.fileList = [] // 清空?qǐng)D片已經(jīng)上傳的圖片列表（綁定在上傳組件的file-list）
? this.maxLength = 0 // 恢復(fù)默認(rèn)值
}

el-upload自定義上傳觸發(fā)多次change事件解決

昨天在做項(xiàng)目時(shí)，有個(gè)附件上傳的需求，需要使用formdata上傳文件，并且支持多文件上傳，使用el-upload on-change時(shí)發(fā)現(xiàn)會(huì)調(diào)用多次，以下是我整理出來規(guī)避的方法。

vue部分：

<el-upload
?:on-change="handleUpload"
?:on-remove="handleRemove"
?:auto-upload="false"
?:show-file-list="false"
?drag
?action="#"
?ref="upload"
?multiple
?style="display:none;"
?>
? <div class="el-upload__text">拖拽文件或點(diǎn)擊上傳</div>
</el-upload>

ts/js部分：

? // 附件上傳
? private handleUpload(file, fileList) {
? ? let length = fileList.length;
? ? this.maxFileLength = Math.max(length, this.maxFileLength)
? ? setTimeout(() => {
? ? ? if (this.maxFileLength !== length) {
? ? ? ? return
? ? ? }
? ? ? fileList.forEach(item => {
? ? ? ? this.fileList.push(item.raw)
? ? ? })
? ? }, 0)
? }

定義一個(gè)全局變量maxFileLength 用于計(jì)算當(dāng)前上傳次數(shù)，如果上傳次數(shù)等于上傳文件的數(shù)量長(zhǎng)度則將文件放到當(dāng)前下發(fā)文件的參數(shù)中。