Angular前端向Node后端上传文件时无数据发送，应如何排查？

流程正确性判断 #

整体文件上传的逻辑流程是正确的：后端配置了multipart解析中间件、前端通过FormData封装文件提交的逻辑没有语法错误。Postman可正常上传说明后端解析逻辑本身没问题，问题出在Angular端的请求配置上。

可能的故障原因及解决方法 #

• 最高概率原因：全局HTTP拦截器覆盖了Content-Type请求头
  绝大多数Angular项目会配置全局HTTP拦截器，为所有接口默认添加Content-Type: application/json请求头。但multipart/form-data类型的表单请求不能使用该头，必须由浏览器自动生成带boundary分隔符的Content-Type值才能让后端正确解析。拦截器的强制覆盖会导致后端无法识别表单结构，最终拿到空的req.body和req.files。
  解决方法：修改全局拦截器逻辑，当请求体为FormData类型时跳过Content-Type设置，让HttpClient自动处理请求头：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // FormData类型请求不手动设置Content-Type
    if (req.body instanceof FormData) {
      return next.handle(req);
    }
    // 其他请求保持原有逻辑
    const clonedReq = req.clone({
      setHeaders: {
        'Content-Type': 'application/json'
      }
    });
    return next.handle(clonedReq);
  }
  

  临时测试也可以直接在上传接口中手动清空Content-Type头：

  this.httpClient.post(url, formData, {
    headers: { 'Content-Type': '' }
  }).subscribe(res=> console.info(res))
  

• 其他可能原因：跨域CORS配置限制
  Postman不存在浏览器同源策略限制，可正常发送请求，但浏览器端跨域时如果后端CORS配置没有允许Content-Type请求头，或者没有开放对应POST方法权限，也可能导致请求体被截断。可以打开浏览器F12控制台的「网络」标签，查看上传请求的实际请求头、请求体是否正常携带了文件数据，同时检查是否有CORS相关报错。
• 字段匹配校验
  确认Postman上传时使用的表单字段名和Angular代码中formData.append的第一个参数uploads[]是否一致，如果字段名不匹配虽然不会完全返回空，但也会导致拿不到对应字段的文件数据。

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