Uppy库文件选择器限制实现原理及自定义方案咨询

核心结论：浏览器原生限制的局限性 #

首先明确：目前没有浏览器API能直接在系统文件选择器中禁用不符合复杂规则（如按类型分大小、总大小限制）的文件。系统文件选择器的筛选逻辑由操作系统控制，浏览器仅能通过input的accept属性做基础类型过滤，无法实现更复杂的限制。Uppy的Restrictions特性也无法突破这一限制，它的核心逻辑是在文件选择完成后即时校验并过滤不符合规则的文件，而非在选择阶段直接禁用。

Uppy Restrictions 底层实现原理 #

Uppy的Restrictions插件通过以下步骤实现文件限制：

• 监听文件选择事件：当用户通过Uppy的FileInput或Dashboard选择文件后，插件捕获文件列表。
• 逐个文件校验：调用内部validateFile方法，依次检查文件类型、大小，同时执行自定义校验逻辑（若配置）。
• 总大小校验：单个文件校验通过后，累加已选文件大小，判断是否超出maxTotalFileSize限制。
• 过滤与提示：不符合规则的文件被排除出上传队列，同时触发restriction-failed事件，开发者可通过该事件展示具体错误提示。

Uppy 核心校验代码逻辑（来自GitHub源码） #

Uppy的Restrictions插件核心逻辑位于packages/@uppy/restrictions/src/index.js，关键片段如下：

// 单个文件校验逻辑
validateFile(file) {
  const { allowedFileTypes, maxFileSize, validateFile: customValidate } = this.options
  let error = null

  // 校验文件类型
  if (allowedFileTypes && !this.isFileTypeAllowed(file.type)) {
    error = this.i18n('restrictionFileTypeNotAllowed', { allowed: allowedFileTypes.join(', ') })
  }
  // 校验单个文件大小
  if (!error && maxFileSize && file.size > maxFileSize) {
    error = this.i18n('restrictionFileSize', { size: bytesToSize(maxFileSize) })
  }
  // 自定义校验逻辑
  if (!error && customValidate) {
    const customError = customValidate(file)
    if (typeof customError === 'string') {
      error = customError
    }
  }
  return error
}

// 总文件大小校验
checkTotalFileSize(files) {
  const { maxTotalFileSize } = this.options
  if (!maxTotalFileSize) return null

  const totalSize = files.reduce((sum, file) => sum + file.size, 0)
  if (totalSize > maxTotalFileSize) {
    return this.i18n('restrictionTotalFileSize', { size: bytesToSize(maxTotalFileSize) })
  }
  return null
}

Uppy 实现复杂限制的配置示例 #

要实现按文件类型分大小、总大小限制，可通过自定义validateFile函数扩展校验逻辑：

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Restrictions from '@uppy/restrictions'

const uppy = new Uppy()
  .use(Dashboard, { target: '#upload-dashboard' })
  .use(Restrictions, {
    // 基础类型过滤（配合accept属性）
    allowedFileTypes: ['image/*', 'video/mp4'],
    // 自定义按类型分大小限制
    validateFile: (file) => {
      if (file.type.startsWith('image/') && file.size > 5 * 1024 * 1024) {
        return `图片文件 ${file.name} 超过5MB限制`
      }
      if (file.type === 'video/mp4' && file.size > 50 * 1024 * 1024) {
        return `MP4视频 ${file.name} 超过50MB限制`
      }
      return true
    },
    // 总文件大小限制
    maxTotalFileSize: 100 * 1024 * 1024 // 100MB
  })

// 监听限制失败事件，展示提示
uppy.on('restriction-failed', (file, error) => {
  alert(error)
})

替代方案：自定义文件选择体验 #

如果希望更贴近“选择阶段限制”的体验，可采用以下方案：

• 自定义文件选择UI：放弃原生系统选择器，自己实现拖拽上传+本地预览界面，选择文件后即时校验，不符合规则的文件直接不加入队列，同时在UI上给出明确提示。
• 强化前置过滤：先用input的accept属性缩小可选文件范围，再结合Uppy的Restrictions做二次校验，减少用户选择不符合规则文件的概率。
• 即时反馈优化：文件选择后立刻弹出清晰的错误提示，告知用户哪些文件不符合要求及原因，提升体验。

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