element ui 拖拽上傳 on-change不觸發

<el-upload
    class="upload-demo"
    drag
    multiple
    action=""
    :file-list = "fileList"
    accept="application/vnd.ms-excel,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    :on-change="(file, fileList) => {handleChange(file, fileList)}"
    :on-remove="(file) => {handleRemove(file)}"
    :before-upload="handleBeforeUpload"
    :auto-upload="false">
    <em class="el-icon-upload"></em>
    <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
    <div class="el-upload__tip" slot="tip">只能上傳xlsx/xls/pdf文件，且不超過3m</div>
</el-upload>

element - ui啟用拖拽功能后，on-change事件不觸發。

 

解決方法：

去掉類型限制 accept = "application/vnd.ms-excel,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 改為在on-change回調里面驗證

 handleChange(file, fileList){
       console.log('handleChange函數被觸發');
       // 判斷file是否是新增
       let isExist = false;
       isExist = this.fileList.some(item => {
         if(item.name == file.name) 
           return true;
       });
       if(!isExist) {
         // 檢測文件類型
         let fileType = file.name.substring(file.name.lastIndexOf('.')+1).toLowerCase();
         let isFileTypeReady = fileType === 'xlsx' || fileType === 'xls' || fileType === 'pdf';
         if(!isFileTypeReady) {
           // 文件類型不符合
           fileList.some((item, index) => {
             if(item.uid == file.uid) {
               fileList.splice(index, 1);
               return true;
             }
           })
           this.$message.error("上傳文件只能是xlsx/xls/pdf格式");
           return false;
         } else {
           // 其他校驗
         }
       } else {
         // 如果已經存在
         fileList.some((item, index) => {
           if(item.uid == file.uid) {
             fileList.splice(index, 1);
             return true;
           }
         });
         this.$message.error(`已經存在文件${file.name}, 請勿重復上傳`);
         return false;
       }
     },