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

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

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

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

由于項目需要，圖片上傳需要進行壓縮之后在調(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" // 自動上傳關(guān)閉
>
? ? <i class="el-icon-plus"></i>
</el-upload>?

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

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

此時我們需要一個防抖方法，來限制它。

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

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

下面附上我完整的代碼

change 事件

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

圖片驗證： uploadFilesVerification

// 圖片驗證
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，項目不需要可以忽略)
? ? const lrzData = await lrz(fileList[key].raw, { quality: 0.5 })
? ? // 內(nèi)容驗證
? ? // ?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 = [] // 清空圖片已經(jīng)上傳的圖片列表（綁定在上傳組件的file-list）
? this.maxLength = 0 // 恢復默認值
}

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

昨天在做項目時，有個附件上傳的需求，需要使用formdata上傳文件，并且支持多文件上傳，使用el-upload on-change時發(fā)現(xiàn)會調(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">拖拽文件或點擊上傳</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)
? }

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