Element組件beforeUpload上傳前限制失效問題怎么解決

本篇內容介紹了“Element組件beforeUpload上傳前限制失效問題怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

當你設置了 :auto-upload="false" 的時候， 這個鉤子是不會被觸發的，因此也可以在on-change中做判斷。

beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) {  // 限制文件大小
     this.$message.warning(`當前限制文件大小不能大于500M`)
     return false
   }
   
   let suffix = this.getFileType(file.name) //獲取文件后綴名
   let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件類型，根據情況自己定義
   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、因為設置了:auto-upload="false" 

:on-change="changeImgClick"方法 和 before-upload 發生了沖突 導致before-upload 方法不起作用

如果有:auto-upload="false" 屬性就要用:on-change 方法監聽

2、on-change上傳文件大小限制

當文件超過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 || "操作失敗");
        }
      });
    },

“Element組件beforeUpload上傳前限制失效問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！