Express/Multer接收Next.js文件上传请求时挂起且文件不完整

这不是Next.js的特定行为，而是你在服务器动作里转发FormData时的处理方式有问题，导致文件流没有完整传输。

核心问题 #

Next.js服务器动作接收的formData是基于Web Streams的实现，直接传给axios的话，axios可能无法正确完整地读取这个流，导致传输到Express时文件数据不完整，进而出现文件模糊、缺失，甚至请求挂起的情况。而纯HTML表单提交是浏览器原生处理FormData，流的读取和传输是完整的，所以没问题。

解决步骤 #

1. 重新构建FormData
   在服务器动作里，把接收的FormData重新遍历并构建成新的FormData实例，确保数据被完整读取：

   export async function uploadAction(formData) {
     const newFormData = new FormData();
     // 遍历原表单的所有字段，包括文件
     for (const [key, value] of await formData.entries()) {
       newFormData.append(key, value);
     }
     // 后续用newFormData发起请求
   }
   

2. 不要手动设置Content-Type
   用axios或fetch转发时，绝对不要手动设置Content-Type: multipart/form-data。axios会自动根据FormData生成包含正确boundary的请求头，手动设置会丢失boundary信息，导致Express的multer无法正确解析表单数据。

3. 确保异步请求完成
   一定要用await包裹axios/fetch的请求，避免服务器动作提前结束，导致连接被强制关闭：

   export async function uploadAction(formData) {
     const newFormData = new FormData();
     for (const [key, value] of await formData.entries()) {
       newFormData.append(key, value);
     }
   
     // 用axios发起请求
     const res = await axios.post('http://你的Express地址/upload', newFormData, {
       timeout: 30000, // 上传大文件时延长超时时间，避免中途终止
     });
   
     return res.data;
   }
   

4. （可选）换用fetch试试
   如果axios还是有问题，换用原生fetch，它对Web Streams的兼容性更好：

   export async function uploadAction(formData) {
     const newFormData = new FormData();
     for (const [key, value] of await formData.entries()) {
       newFormData.append(key, value);
     }
   
     const res = await fetch('http://你的Express地址/upload', {
       method: 'POST',
       body: newFormData,
     });
   
     if (!res.ok) throw new Error('上传失败');
     return await res.json();
   }
   

额外检查 #

确认Express的multer配置没有限制过小的文件大小，比如：

const upload = multer({
  dest: 'uploads/',
  limits: { fileSize: 10 * 1024 * 1024 }, // 比如设置10MB上限，根据需求调整
});

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