如何在自定义校验中通过JS手动抛出Filepond错误以保留原生校验UI？

完全可以通过JavaScript手动触发FilePond的原生错误展示逻辑，自定义校验提示会完全复用FilePond自带的UI样式，不需要额外开发自定义错误组件。

• 不推荐在addfile事件钩子里直接做校验拦截：该钩子是文件成功添加到列表后的回调，此时文件已经完成初始添加流程，需要手动调用实例方法才能触发错误展示
• 优先使用FilePond内置的fileValidate配置项做自定义校验：在校验函数中返回错误字符串，FilePond会自动将错误绑定到对应文件条目上，触发原生错误提示，校验不通过的文件不会进入正常上传流程
• 两种等效的错误触发方式
  1. 在自定义校验函数中返回错误文案，自动触发原生错误展示
  2. 通过FilePond实例的setFileError方法，给指定文件主动挂载错误信息，展示效果和内置类型、大小校验的错误完全一致

<template>
  <file-pond
    name="test"
    ref="pond"
    label-idle="Click here, or drop files here..."
    accepted-file-types="image/jpg, image/jpeg, image/png"
    label-file-type-not-allowed="change file types"
    file-validate-type-label-expected-types="{allButLastType} or {lastType} is allowed"
    label-max-file-size-exceeded="file size limit exceeded"
    label-max-file-size="max file size 15MB"
    max-file-size="15MB"
    :file-validate="validateImageSize"
    :disabled="isDisabled"
    :allow-remove="false"
    @addfile="addFile"
  />
</template>

<script>
export default {
  methods: {
    // 自定义图片尺寸校验逻辑
    async validateImageSize(file) {
      // 非图片文件跳过校验（类型校验已由FilePond内置逻辑处理）
      if (!file.fileType.startsWith('image/')) return null
      try {
        const base64DataUrl = file.getFileEncodeDataURL()
        // 加载图片获取真实宽高
        const image = await new Promise((resolve, reject) => {
          const img = new Image()
          img.onload = () => resolve(img)
          img.onerror = reject
          img.src = base64DataUrl
        })
        // 匹配尺寸校验规则
        if (image.width > image.height && image.height < 1000) {
          // 返回错误文案，自动触发FilePond原生错误提示
          return '横版图片高度不能小于1000px'
        }
        if (image.height > image.width && image.width < 1000) {
          return '竖版图片宽度不能小于1000px'
        }
        // 校验通过返回null
        return null
      } catch (e) {
        return '图片解析失败，请重新上传'
      }
    },
    async addFile(error, file) {
      // 存在校验错误时拦截后续逻辑
      if (error) return
      this.$emit('add-file', file.file)
    }
  }
}
</script>

如果需要在现有addfile回调逻辑中主动触发错误提示，可通过FilePond实例方法操作：

• 通过this.$refs.pond获取组件实例
• 调用setFileError(文件标识, 错误文案)方法，传入当前文件的内部ID和错误内容，即可弹出原生错误提示
• 需要清除已展示的错误时，将错误文案参数设为null即可完成清除

内容的提问来源于stack exchange，提问作者REI