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;
       }
     },