文件上传组件上传时中断上传文件

场景描述

选择文件后判断文件的类型、大小等是否满足需求，不满足需求中断文件上传

实现思路

在文件上传组件提供的“文件上传前”或“选择文件后”事件中控制

两个事件中控制的区别：文件上传组件提供了图片裁剪功能，如果使用了图片裁剪“文件上传前”是在图片裁剪后执行，“选择文件后”是在弹出图片裁剪框前执行

实现步骤

1.在附件上传组件的“文件上传前”或“选择文件后”事件中写代码

2.js中判断类型不满足需求时候通过Notify弹出提示信息，并中断上传

“文件上传前”事件中通过下面的代码中断：

      event.preventDefault();

完整的案例代码如下：

    onUploader0BeforeUpload = (event) => {
        let type = event.detail.file.type;
        let isJpgOrPng = type === 'image/jpeg' || type === 'image/png';
        if(!isJpgOrPng){
            Notify.show({message:"You can only upload JPG/PNG file!",type:"danger"});
            event.preventDefault();
        }     
    }

“选择文件后”事件中通过下面的代码中断：

      event.detail.callback(false);
      event.preventDefault();

完整的案例代码如下：

    onUploader1BeforeRead = (event) => {  
        let type = event.detail.file.type;
        let isJpgOrPng = type === 'image/jpeg' || type === 'image/png';
        if(!isJpgOrPng){
            Notify.show({message:"You can only upload JPG/PNG file!",type:"danger"});
            event.detail.callback(false);
            event.preventDefault();
        }   
    }

注意：使用Notify弹出提示信息时需要添加引用 import {Notify} from '@antmjs/vantui';