欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Element上傳組件beforeUpload上傳前限制失效問題

 更新時間:2023年03月28日 09:28:15   作者:前端 曉雷  
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Element上傳組件beforeUpload上傳前限制失效

在before-upload(上傳文件之前的鉤子 參數(shù)為上傳的文件 若返回 false 或者返回 Promise 且被 reject 則停止上傳)鉤子里去做判斷 這里有一個坑

當(dāng)你設(shè)置了 :auto-upload="false" 的時候, 這個鉤子是不會被觸發(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: '文件格式錯誤',
       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的時候讓他提示文件大小不能超過20MB,請重新上傳。

下面我們來看代碼:

<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,請重新上傳。",
? ? ? ? ? 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é)

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • v-html渲染組件問題

    v-html渲染組件問題

    最近在學(xué)習(xí)vue,今天正好發(fā)現(xiàn)個問題,本文介紹了v-html渲染組件問題,整理了問題的解決方法,有需要的小伙伴可以參考下
    2021-05-05
  • vue父子組件之間的傳參的幾種方式小結(jié)

    vue父子組件之間的傳參的幾種方式小結(jié)

    本文主要介紹了vue父子組件之間的傳參的幾種方式小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vite版本更新檢查實(shí)現(xiàn)頁面自動刷新的解決思路

    Vite版本更新檢查實(shí)現(xiàn)頁面自動刷新的解決思路

    這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁面自動刷新的解決思路,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-02-02
  • 微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖(推薦)

    微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖(推薦)

    這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue-CLI3.x 設(shè)置反向代理的方法

    Vue-CLI3.x 設(shè)置反向代理的方法

    這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序

    Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序

    這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 詳解如何用VUE寫一個多用模態(tài)框組件模版

    詳解如何用VUE寫一個多用模態(tài)框組件模版

    這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue引入高德地圖并繪制點(diǎn)線面的方法

    vue引入高德地圖并繪制點(diǎn)線面的方法

    這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2024-03-03
  • vue移動端項(xiàng)目渲染pdf步驟及問題小結(jié)

    vue移動端項(xiàng)目渲染pdf步驟及問題小結(jié)

    這篇文章主要介紹了vue移動端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的,基本遇到3個問題,分別在文中給大家詳細(xì)介紹,需要的朋友可以參考下
    2022-08-08
  • 如何手動銷毀Vue中掛載的組件

    如何手動銷毀Vue中掛載的組件

    這篇文章主要介紹了如何手動銷毀Vue中掛載的組件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評論