FilePond触发dropValidate校验时是否支持展示错误提示信息?
实现方法
该需求完全支持,实现逻辑如下:
你当前代码中dropValidate={true}只是开启了默认的拖拽校验规则,没有接入自定义提示逻辑,有两种实现方式可选:
方式1:自定义dropValidate校验函数(推荐,可灵活定制提示文案)
dropValidate属性支持传入自定义校验函数,函数接收待校验的文件对象、当前FilePond实例作为入参,校验不通过时直接触发告警逻辑、返回false阻止文件上传即可,校验通过返回true。
修改后的核心代码如下:
<FilePond ref={ref => (this.pond = ref)} files={files.map(file => file.file)} maxFiles={50} maxFileSize="10MB" acceptedFileTypes={['image/*', 'application/pdf']} server={{ // 保留原有server配置 }} onupdatefiles={fileItems => { setFiles(fileItems); }} onaddfilestart={() => { setImagesUploading(true); }} onprocessfilestart={() => { setImagesUploading(true); }} onprocessfiles={() => { setImagesUploading(false); }} // 替换原来的dropValidate={true} dropValidate={(file) => { // 校验文件大小 const maxFileSize = 10 * 1024 * 1024; if (file.size > maxFileSize) { // 此处可替换为项目内的全局提示组件,比如antd的message.error alert(`文件「${file.name}」超过10MB大小上限,无法上传`); return false; } // 校验文件类型 const allowedTypePrefix = ['image/', 'application/pdf']; const isTypeValid = allowedTypePrefix.some(prefix => file.type.startsWith(prefix)); if (!isTypeValid) { alert(`文件「${file.name}」格式不支持,仅允许上传图片、PDF文件`); return false; } // 校验通过,允许文件放置上传 return true; }} {...other} />
方式2:监听onerror事件(实现更简单)
FilePond校验失败时会触发onerror回调,回调参数中自带默认的错误提示信息,直接在回调里触发告警即可,不需要自己重写校验逻辑:
<FilePond // 保留原有其他配置 dropValidate={true} onerror={(error) => { // error.body为默认错误提示文本,直接传入告警组件即可 alert(error.body); }} />
内容的提问来源于stack exchange,提问作者Happy1234
相关产品推荐
相关产品推荐

