如何解决 Axios 上传 Excel 文件失败而 CSV 成功的问题-js教程-PHP中文网

如何解决 Axios 上传 Excel 文件失败而 CSV 成功的问题

Axios 上传 CSV 文件正常但 Excel 文件在 Flask 后端 request.files 为空，根本原因常是 Next.js 中间件（如 next-http-proxy-middleware）默认启用的 bodyParser 干扰了 multipart/form-data 的原始二进制流，尤其对非文本 MIME 类型（如 Excel）解析异常。

axios 上传 csv 文件正常但 excel 文件在 flask 后端 `request.files` 为空，根本原因常是 next.js 中间件（如 `next-http-proxy-middleware`）默认启用的 `bodyparser` 干扰了 multipart/form-data 的原始二进制流，尤其对非文本 mime 类型（如 excel）解析异常。

在使用 Axios 通过 FormData 上传文件到 Flask 后端时，若仅 CSV 可被正确接收而 .xlsx 文件始终导致 request.files 为空，问题通常不出现在前端代码或 Flask 配置本身，而在于中间层代理（尤其是 Next.js API 路由中的 HTTP 代理中间件）对 multipart 请求的预处理机制。

你提供的前端代码逻辑完全正确：

const formData = new FormData();
formData.append('file', file); // ✅ file 对象包含完整 name、type、size 等属性
axios.post(myUrl, formData, {
  headers: { 'Content-Type': 'multipart/form-data' }, // ⚠️ 注意：此处应省略该 header！
});

⚠️ 关键提醒：FormData 实例必须由浏览器自动设置 Content-Type（含动态生成的 boundary），手动指定 'multipart/form-data' 会移除 boundary，导致后端无法解析——尽管 CSV 偶尔“侥幸”成功（因部分解析器容错强），Excel 等复杂二进制格式则必然失败。✅ 正确写法应为：

axios.post(myUrl, formData);
// 不传 headers，让浏览器自动设置：Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...

但即使修正 header，若你的项目基于 Next.js 并使用了 next-http-proxy-middleware（或类似代理中间件），真正的瓶颈往往在此。该中间件默认开启 bodyParser，它会尝试提前读取并解析请求体——而 multipart/form-data 是流式二进制数据，bodyParser 的文本化处理会破坏 Excel 文件结构，并使后续 Flask 的 request.files 无法识别原始表单字段。

Excel XLSX Formula Cleanup

诊断并修复涉及公式、命名范围、Power Query 刷新、数据透视表、VBA/宏保存等问题的 Microsoft Excel XLSX 工作簿

下载

✅ 解决方案：在 Next.js API 路由配置中显式禁用 bodyParser：

// pages/api/upload.ts 或 app/api/upload/route.ts（App Router）
export const config = {
  api: {
    externalResolver: true,
    bodyParser: false, // ? 核心修复：禁用 Next.js 内置 body 解析
  },
};