技術標籤：Vuevue.jselementuiupload

問題

在accept中新增上傳檔案的型別只能起到“表面”作用，選擇“所有檔案”之後，還是可以上傳任何型別的檔案，根本起不到限制作用。

解決辦法

在before-upload（上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 或者返回 Promise 且被 reject，則停止上傳。）鉤子裡去做判斷。這裡有一個坑，當你設定了 :auto-upload="false" 的時候， 這個鉤子是不會被觸發的，因此也可以在 on-change 中做判斷。

上程式碼

// :before-upload或者: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
         })
     }
     return suffixArray
 },
 getFileType(name) {
     let startIndex = name.lastIndexOf('.')
     if (startIndex !== -1) {
         return name.slice(startIndex + 1).toLowerCase()
     } else {
         return ''
     }
 }