React+Express/Go文件上传请求偶尔挂起的问题排查

一、前端侧排查点 #

• Axios 请求配置优化

  • 强制设置timeout：未配置超时的请求可能因前端无限等待而看似挂起，建议添加timeout: 30000（30秒），同时捕获超时错误，避免无意义等待。
  • 稳定FormData构造：偶发问题可能和文件读取时机有关，确保在onChange事件中完全获取文件对象后再提交表单，避免异步读取未完成就发起请求。
  • 非必要禁用withCredentials：跨域场景下，凭证携带可能引发偶发连接阻塞，尤其是后端Cookie配置不稳定时，可临时关闭测试是否解决问题。

• 浏览器/网络限制规避

  • 限制并发上传数：浏览器对同域名并发请求数有限制（通常6个），同时发起多个上传可能导致请求排队，建议一次仅处理一个文件。
  • 关闭持久连接测试：若开启HTTP/2或持久连接，偶发的连接复用异常可能导致请求卡住，可在Axios中添加headers: { Connection: 'close' }关闭持久连接验证。

二、后端通用排查点（Express/Go均适用） #

• 前置逻辑阻塞排查

  • 检查请求到达后的中间件：服务器能记录请求但进不了上传处理，说明请求卡在multipart解析前的环节。排查自定义日志、鉴权等中间件是否存在偶发阻塞（比如异步Promise未正确处理、数据库查询超时）。
  • 校验请求头完整性：网络波动可能导致Content-Length或Content-Type等关键请求头缺失/错误，导致后端解析器等待完整数据。建议在日志中打印所有请求头，对比成功与失败请求的差异。

• Multipart解析器配置修正

  • Express（multer）：
    • 调高limits阈值：过小的fileSize/fieldSize限制会在文件接近阈值时引发偶发解析失败，建议设置为fileSize: 100 * 1024 * 1024（100MB），同时监听multer的错误事件捕获解析异常。
    • 替换memoryStorage：内存存储可能因内存不足导致解析阻塞，改用diskStorage写入磁盘更稳定。
  • Go（gorilla/mux）：
    • 调整MaxMemory：默认32MB的限制会在大文件时写入临时文件，若临时目录权限不足或磁盘满会导致阻塞，可调高至64 << 20（64MB），或指定可写的临时目录。
    • 强制处理ParseMultipartForm错误：必须在上传逻辑前调用该方法，并捕获返回的错误，避免解析失败导致请求挂起。

• 服务器资源瓶颈排查

  • 监控CPU/内存：服务器资源紧张时，multipart解析（尤其是大文件）会被阻塞，查看请求挂起时的资源使用率，是否存在CPU飙升、内存不足情况。
  • 测试文件IO：若后端写入磁盘，IO瓶颈会导致处理阻塞，可临时将文件写入内存测试，判断是否为IO问题。

三、网络层面排查 #

• TCP数据包细节验证：即使Wireshark显示数据包一致，也要检查是否存在TCP重传或延迟确认，偶发丢包会导致TCP连接等待重传，看似请求挂起。过滤对应请求流，查看是否有重传、超时标记。
• 代理超时配置检查：若前端与后端之间有Nginx等代理，检查proxy_read_timeout、proxy_send_timeout配置，超时过短会导致代理提前断开连接；同时检查代理缓冲配置，避免因缓冲不足阻塞请求。

四、代码修正示例 #

Express 端（multer） #

const upload = multer({ 
  storage: multer.diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => cb(null, file.originalname)
  }),
  limits: { fileSize: 100 * 1024 * 1024 } // 100MB
});

app.post('/upload', (req, res) => {
  upload.single('file')(req, res, (err) => {
    if (err) {
      console.error('Multer解析错误:', err);
      return res.status(400).send('文件上传失败');
    }
    // 后续处理逻辑
    res.send('上传成功');
  });
});

Go 端（gorilla/mux） #

func uploadHandler(w http.ResponseWriter, r *http.Request) {
  // 调高MaxMemory到64MB，临时文件写入/tmp目录
  err := r.ParseMultipartForm(64 << 20)
  if err != nil {
    log.Printf("解析Multipart错误: %v", err)
    http.Error(w, "文件上传失败", http.StatusBadRequest)
    return
  }

  file, handler, err := r.FormFile("file")
  if err != nil {
    log.Printf("获取文件错误: %v", err)
    http.Error(w, "获取文件失败", http.StatusBadRequest)
    return
  }
  defer file.Close()

  // 写入文件逻辑
  dst, err := os.Create("/tmp/" + handler.Filename)
  if err != nil {
    log.Printf("创建文件错误: %v", err)
    http.Error(w, "保存文件失败", http.StatusInternalServerError)
    return
  }
  defer dst.Close()

  _, err = io.Copy(dst, file)
  if err != nil {
    log.Printf("写入文件错误: %v", err)
    http.Error(w, "保存文件失败", http.StatusInternalServerError)
    return
  }

  w.Write([]byte("上传成功"))
}

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