Chrome浏览器使用react-dropzone拖拽上传后出现PDF下载失败错误

• 核心原因是你使用的Chrome 95版本属于存在已知bug的Chromium内核版本，拖拽文件后内核的下载进程会误缓存拖拽的文件句柄，后续触发Blob下载时会把缓存的文件句柄当成待下载内容批量导出，同时阻塞正常的PDF下载流程，该bug会污染同内核的Edge浏览器进程，只能重启设备重置进程解决。
• 次要问题是你的文件上传请求逻辑存在错误：你手动设置了multipart/form-data请求头，但提交的是普通JS对象而非FormData实例，既无法正确上传文件，也可能加剧请求解析异常触发内核bug。

1. 首先修复请求构造逻辑，正确使用FormData提交表单和文件：

// 替换原有axios提交部分的代码
const formData = new FormData()
Object.entries(finalData).forEach(([key, value]) => {
  formData.append(key, value)
})
// 如需上传文件，追加到FormData
files.forEach(file => {
  formData.append('upload_files[]', file)
})

axios
  .post(process.env.REACT_APP_DJANGO_URL + "/form114/", formData, {
    // 移除手动设置的contentType，axios会自动生成带boundary的正确请求头
    responseType: "blob"
  })
  .then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `Form 114 - ${formValues.paying_company.id}.pdf`);
    document.body.appendChild(link);
    link.click();
    // 新增：清理DOM和释放Blob内存，避免触发内核bug
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  })
  .catch((error) => console.log(error));

2. 新增拖拽后文件句柄清理逻辑，避免内核缓存多余文件：
   在FilesUploadStep组件的useDropzone配置中显式开启阻止事件冒泡，同时添加input文件列表清理逻辑：

const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, inputRef } = useDropzone({
  accept: 'image/jpeg, image/png, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/pdf',
  multiple: true,
  onDropAccepted,
  // 显式阻止拖拽事件冒泡到页面
  preventDropOnDocument: true
});

// 新增useEffect清理input缓存
useEffect(() => {
  if (inputRef.current) {
    inputRef.current.value = ''
  }
}, [files, inputRef])

3. 客户端兼容方案：提示使用Chrome 95版本的用户升级浏览器到97及以上版本，Chromium官方已经在97版本修复了该拖拽相关的下载进程bug。

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