FineUI-100-Questions/questions/35.文件上传控件多次选择文件和自定义校验.md

文件上传控件多次选择文件和自定义校验

在使用FineUI中上传文件控件的时候,如果想要自定义文件校验规则怎么办呢?

const file = {
    type: "bi.file",
    multiple: true,
    accept: ".png,.pdf,image/jpg,image/*",
    maxSize: 1024 * 1024, // 最大文件大小
    maxLength: 3, // 最大文件个数
    errorText: function (error) {
        return "上传失败啦";
    },
    listeners: [{
        eventName: "EVENT_CHANGE",
        action: function (obj) {
            // 可以对文件进行处理及判断
            const files = obj.files;
            const invalid = files.some(file => {
                if (/image/.test(file.type) && file.size > 1024 * 10) {
                    BI.Msg.toast(`${file.type}类型文件不允许超过10KB`, { level: "error" });
                    return true;
                }
            });
            // 可选的是否清空掉上次上传的内容
            file.reset();
            !invalid && file.upload();
        }
    }]
};

file组件在选择文件后,会触发EVENT_CHANGE事件,对外抛出的参数包含所选文件列表,我们可以对这些内容进行筛选处理,进行自定义校验等操作