Node.js向API发送FormData时400/500错误的解决方法

前端问题修正 #

1. 避免文件覆盖问题
   当前代码用file.name作为FormData的key，若上传多个同名文件，后面的会覆盖前面的。改成固定keyfiles，让后端能正确接收多文件：

   // index.js 中修改文件添加逻辑
   Array.from(files).forEach((file) => {
       formData.append('files', file); // 用固定key替代file.name
   });
   

2. 确认请求头自动处理
   确保你的axios实例（api）没有手动设置Content-Type，axios会自动识别FormData并设置正确的multipart/form-data请求头。如果有拦截器强制设置了其他类型，会导致后端解析失败。

3. 验证token有效性
   检查token变量是否已正确赋值，避免因token为undefined导致后端验证报错（返回400/500）。

后端问题修正 #

1. 适配formidable新版本API
   若使用formidable v4+，filename回调的参数结构已变更，part.originalFilename不存在，需改为part.filename：

   const formidableConfig = {
     // ...其他配置
     filename: (name, ext, part) => {
       return part.filename; // 替换part.originalFilename
     },
   };
   

2. 完善错误处理与响应返回

   • 确保BusinessError已正确定义并导入，否则reject时会抛出未定义错误导致500。如果没有自定义错误类，直接用原生Error替代：

     if (error) {
       console.error('解析表单错误:', error);
       reject(new Error(error.message));
       return;
     }
     

   • 在postChallengesUpload函数末尾添加响应返回，否则前端会因无响应超时或报错：

     async function postChallengesUpload(req, res) {
       try {
         const { files, fields } = await parseRequest(req);
         // 处理文件和字段逻辑...
         res.status(200).json({ success: true, message: '上传成功', files, fields });
       } catch (error) {
         res.status(400).json({ success: false, message: error.message });
       }
     }
     

3. 确认路由与配置生效

   • 检查apiHandler是否正确映射了POST请求，确保请求真实到达postChallengesUpload函数（可以在函数开头添加console.log('收到上传请求')验证）。
   • 确保config中的bodyParser: false生效，否则Next.js默认的bodyParser会提前解析请求体，导致formidable无法获取数据。

4. 调试formidable解析过程
   在form.parse回调中添加详细日志，查看错误信息：

   form.parse(req, (error, fields, files) => {
     if (error) {
       console.error('formidable解析错误:', error); // 打印具体错误信息
       reject(new Error(error.message));
       return;
     }
     console.log('解析得到的字段:', fields);
     console.log('解析得到的文件:', files);
     resolve({ files, fields });
   });
   

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