Dropzone.js技术问题：火狐浏览器已删除文件上传报错延迟

问题背景 #

使用 Dropzone.js 开发文件上传功能时，遇到 Firefox 独有的异常：

• 选中文件到 Dropzone 区域后，物理删除本地原文件
• 提交表单后，无法即时触发预期的 Server responded with 0 code 错误（该错误是错误处理的核心依据）
• Chrome 中会立即触发错误，但 Firefox 需要等待4-5分钟才返回错误
• 已排查语法错误（如遗漏逗号、return 后无效代码等），未找到根源

问题原因 #

Firefox 与 Chrome 对已选中文件的缓存机制存在差异：

• Chrome 在提交上传请求时会立即检测文件的本地状态，一旦发现文件不存在就抛出错误
• Firefox 会保留文件句柄的缓存，即使本地文件被删除，也不会立即检测到状态变化，需等待缓存超时（约4-5分钟）后才会触发错误

解决方案 #

1. 提交前主动校验文件可用性（推荐） #

在 Dropzone 的 sending 事件中，通过 FileReader 尝试读取文件片段，判断文件是否还存在。这是兼容性最好的方案：

Dropzone.options.myDropzone = {
  sending: function(file, xhr, formData) {
    const reader = new FileReader();
    // 读取失败时触发错误并终止请求
    reader.onerror = () => {
      this.emit('error', file, '本地文件已被删除，无法上传');
      xhr.abort();
    }.bind(this);
    // 仅读取文件前10字节，避免大文件性能开销
    reader.readAsArrayBuffer(file.slice(0, 10));
  },
  error: function(file, message) {
    // 自定义错误处理逻辑
    console.error(message);
    // 例如更新UI提示用户
    file.previewElement.classList.add('dz-error');
  }
};

2. 缩短请求超时时间 #

通过调整 Dropzone 的超时配置，让 Firefox 更快返回错误，但需注意避免误判正常的慢请求：

Dropzone.options.myDropzone = {
  timeout: 30000, // 设置为30秒，可根据业务需求调整
  error: function(file, message) {
    if (message.includes('Server responded with 0 code')) {
      // 针对文件删除场景的错误处理
      alert('文件已被删除，请重新选择');
    }
  }
};

3. 可选：利用文件系统API监听文件变化（兼容性有限） #

借助浏览器的 File System Access API 定时检测文件状态，但该 API 仅支持部分现代浏览器，且需要用户授权：

Dropzone.options.myDropzone = {
  addedfile: async function(file) {
    // 仅在支持File System Access API的浏览器中执行
    if ('showOpenFilePicker' in window) {
      try {
        // 获取文件句柄（需要用户首次选择时的授权）
        const [handle] = await window.showOpenFilePicker();
        setInterval(async () => {
          // 检查文件是否仍存在
          const exists = await handle.queryPermission({ mode: 'read' }) === 'granted';
          if (!exists) {
            this.emit('error', file, '文件已被删除');
          }
        }, 1000);
      } catch (err) {
        console.error('无法监听文件状态:', err);
      }
    }
  }
};

注意事项 #

• 方案1是最通用的实现，无需额外权限，几乎兼容所有现代浏览器
• 方案2需根据实际网络情况调整超时时间，避免影响正常上传
• 方案3兼容性有限，仅适合对实时性要求极高的场景

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