Dropzone.js acceptedFiles配置拖拽上传失效仅点击上传正常问题咨询

问题原因 #

你遇到的现象是Dropzone内置的acceptedFiles规则对文件选择器和拖拽场景的匹配逻辑不一致导致的：不同操作系统、浏览器对拖拽获取的文件MIME类型识别存在兼容问题，部分场景下拖拽的.doc/.docx文件不会被识别为application/msword或application/vnd.openxmlformats-officedocument.wordprocessingml.document类型，仅会携带文件后缀标识，因此内置规则判定文件不合法，不会加入getAcceptedFiles()的返回队列，只会生成预览。

解决方案 #

你不需要额外手动全局过滤文件，按照以下配置调整即可同时覆盖点击选择和拖拽场景的校验：

1. 优先使用后缀作为校验基准，搭配自定义accept钩子统一校验逻辑，替代仅依赖内置MIME类型匹配的规则
2. 开启无效文件自动移除配置，避免不合法文件残留预览

完整配置参考：

Dropzone.options.yourDropzoneId = {
  // 基础配置保证文件选择器的过滤选项正常显示
  acceptedFiles: ".doc,.docx",
  // 自定义校验逻辑，同时适配点击和拖拽场景
  accept: function(file, done) {
    const allowedExts = ['.doc', '.docx'];
    const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
    if (allowedExts.includes(fileExt)) {
      done(); // 校验通过
    } else {
      done("仅支持上传doc、docx格式文件"); // 校验不通过，返回错误信息
    }
  },
  // 校验不通过时自动移除无效预览，旧版本Dropzone默认关闭该配置
  autoRemoveInvalidFiles: true,
  // 可选配置：自定义错误提示逻辑
  error: function(file, msg) {
    if (!file.accepted) {
      alert(msg);
    }
  }
}

配置调整后，不合法的拖拽文件会被自动移除预览，合法文件会正常进入getAcceptedFiles()的返回结果中。

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