關(guān)于Element上傳組件beforeUpload上傳前限制失效問題
Element上傳組件beforeUpload上傳前限制失效
在before-upload(上傳文件之前的鉤子 參數(shù)為上傳的文件 若返回 false 或者返回 Promise 且被 reject 則停止上傳)鉤子里去做判斷 這里有一個(gè)坑
當(dāng)你設(shè)置了 :auto-upload="false" 的時(shí)候, 這個(gè)鉤子是不會(huì)被觸發(fā)的,因此也可以在on-change中做判斷。
beforeUpload(file, fileList) { if (file.size / (1024 * 1024) > 500) { // 限制文件大小 this.$message.warning(`當(dāng)前限制文件大小不能大于500M`) return false } let suffix = this.getFileType(file.name) //獲取文件后綴名 let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件類型,根據(jù)情況自己定義 if (suffixArray.indexOf(suffix) === -1) { this.$message({ message: '文件格式錯(cuò)誤', type: 'error', duration: 2000 }) this.$refs.uploadPhoto.handleRemove(file); } return suffixArray }, getFileType(name) { let startIndex = name.lastIndexOf('.') if (startIndex !== -1) { return name.slice(startIndex + 1).toLowerCase() } else { return '' } }
element中before-upload不起作用的問題 、on-change上傳文件大小限制
1、因?yàn)樵O(shè)置了:auto-upload="false"
:on-change="changeImgClick"方法 和 before-upload 發(fā)生了沖突 導(dǎo)致before-upload 方法不起作用
如果有:auto-upload="false" 屬性就要用:on-change 方法監(jiān)聽
2、on-change上傳文件大小限制
當(dāng)文件超過20MB的時(shí)候讓他提示文件大小不能超過20MB,請(qǐng)重新上傳。
下面我們來看代碼:
<el-upload ? ?class="upload-demo" ref="upload" name="upload" :action="action()" ? ? :on-change="(file, fileList) => {handleChange(file, fileList, scope);} " ? ? :on-remove=" (file, fileList) => {handleRemove(file, scope);}" ? ? :file-list="scope.row.fileList" ? ? :auto-upload="false" ? ? ?> ? ? ? ?<el-button ?slot="trigger" size="mini" type="primary" v-if="scope.row.fileList.length == 0" >上傳文件</el-button> </el-upload>
首先在el-upload的:on-change事件里的handleChange的方法中可以獲取上傳文件的大小
handleChange(file, fileList, scope) { ?? ??? ?//獲取上傳文件大小 ? ? ? let imgSize = Number(file.size / 1024 / 1024); ? ? ? ? if (imgSize > 20) {? ? ? ? ? this.$msgbox({ ? ? ? ? ? title: "", ? ? ? ? ? message: "文件大小不能超過20MB,請(qǐng)重新上傳。", ? ? ? ? ? type: "warning", ? ? ? ? }); ? ? ? ? this.materialList[scope.$index].fileList.splice(scope.index, 1); ? ? ? ? return; ? ? ? }? ? ? ? ? ?//后面可以不用 我自己也沒有用到 ? ? ? this.text = "上傳中"; ? ? ? ?? ? ? ? this.loading = true; ? ? ? this.materialList[scope.$index].fileList.push(file); ? ? ? let data = new FormData(); ? ? ? data.append("files", file.raw); ? ? ? uploadFile(data, scope.row.materialName).then((response) => { ? ? ? ? if (response.success) { ? ? ? ? ? this.loading = false; ? ? ? ? ? this.listedFiles[scope.$index] = response.result[0].id; ? ? ? ? } else { ? ? ? ? ? this.loading = false; ? ? ? ? ? this.msgError(response.message || "操作失敗"); ? ? ? ? } ? ? ? }); ? ? },
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 使用element upload上傳組件如何去掉刪除按鈕
- element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
- 解決elementui上傳組件el-upload無法第二次上傳問題
- elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
- element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
- element-ui 中使用upload多文件上傳只請(qǐng)求一次接口
- vue-cli3.0+element-ui上傳組件el-upload的使用
- element-ui upload組件多文件上傳的示例代碼
- element UI upload組件上傳附件格式限制方法
- 在vue項(xiàng)目中使用element-ui的Upload上傳組件的示例
- Element中Upload組件上傳功能實(shí)現(xiàn)(圖片和文件的默認(rèn)上傳及自定義上傳)
相關(guān)文章
Vite版本更新檢查實(shí)現(xiàn)頁面自動(dòng)刷新的解決思路
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁面自動(dòng)刷新的解決思路,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖(推薦)
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue移動(dòng)端項(xiàng)目渲染pdf步驟及問題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的,基本遇到3個(gè)問題,分別在文中給大家詳細(xì)介紹,需要的朋友可以參考下2022-08-08