HTTP POST请求中Base64编码文件变为空字符串问题排查

看起来你遇到了一个挺棘手的问题：发送前明明存在的Base64图片数据，到了服务器就变成空字符串了。结合你提供的代码和请求信息，我来帮你分析几个可能的原因和解决办法：

1. 先确认发送前数据的真实状态 #

首先，你提到console.log(newMerchandise)时Base64还存在，但浏览器的console有时候会显示对象的实时引用，而不是快照。如果之后代码里不小心修改了这个数组的内容，console里的显示可能会误导你。

建议把日志改成快照形式，确保发送前数据确实完整：

console.log(JSON.stringify(newMerchandise)); // 打印序列化后的字符串，看imageBase64是否存在

2. 排查Class实例的序列化问题 #

你使用的是NewMerchandiseUploadRequestClass类的实例数组，Angular的HttpClient在序列化请求体时，会用JSON.stringify()处理数据。如果你的class里有私有属性、getter/setter，或者没有正确初始化属性，可能导致某些字段无法被正常序列化。

解决办法是把class实例转换成纯JavaScript对象后再发送：

public addItems(newMerchandise: Array<NewMerchandiseUploadRequestClass>, artistRef: string): Observable<ApiResponse<string>> {
  // 将class实例转为纯对象，避免序列化丢失字段
  const plainMerchandise = newMerchandise.map(item => ({
    itemName: item.itemName,
    itemType: item.itemType,
    price: item.price,
    purchaseUrl: item.purchaseUrl,
    imageBase64: item.imageBase64
  }));
  
  console.log(JSON.stringify(plainMerchandise)); // 再次确认数据
  
  return this._http.post(`${environment.apiUrl}/api/merchandise/add-items`, {
    newMerchandise: plainMerchandise,
    artistRef: artistRef
  })
  .pipe(
    map((response: MusicPortalApiResponse<string>): MusicPortalApiResponse<string> => {
      return { response: response.response, hasError: response.hasError, exception: response.exception }
    })
  );
}

3. 检查全局HTTP拦截器 #

如果你的Angular应用里配置了全局HTTP拦截器，它可能会在请求发送前修改请求体（比如压缩、加密或者过滤某些内容）。检查拦截器代码，看看有没有对imageBase64字段做了清空或处理。

4. 正确使用FormData（如果需要） #

你之前尝试过FormData但格式混乱，可能是构建方式不对。如果要通过FormData发送，正确的做法是逐个添加字段，而不是直接序列化对象：

public addItems(newMerchandise: Array<NewMerchandiseUploadRequestClass>, artistRef: string): Observable<ApiResponse<string>> {
  const formData = new FormData();
  formData.append('artistRef', artistRef);
  
  // 循环添加商品数组的每个字段
  newMerchandise.forEach((item, index) => {
    formData.append(`newMerchandise[${index}].itemName`, item.itemName);
    formData.append(`newMerchandise[${index}].itemType`, item.itemType);
    formData.append(`newMerchandise[${index}].price`, item.price.toString());
    formData.append(`newMerchandise[${index}].purchaseUrl`, item.purchaseUrl);
    formData.append(`newMerchandise[${index}].imageBase64`, item.imageBase64);
  });
  
  return this._http.post(`${environment.apiUrl}/api/merchandise/add-items`, formData)
  .pipe(
    map((response: MusicPortalApiResponse<string>): MusicPortalApiResponse<string> => {
      return { response: response.response, hasError: response.hasError, exception: response.exception }
    })
  );
}

注意：发送FormData时不要手动设置Content-Type，Angular会自动添加正确的multipart/form-data头和边界标识。

5. 检查服务器端接收配置 #

最后，确认服务器端的接收模型是否正确：

• 模型的imageBase64字段是否为string类型，有没有设置过MaxLength限制（如果Base64过长可能被截断为空）；
• 反序列化器是否允许接收长字符串（比如ASP.NET里的RequestSizeLimit配置）；
• 有没有中间件会过滤或清洗请求体里的Base64内容。

从你提供的请求头看，Content-Length只有165字节，这明显不符合带Base64图片的请求大小，所以大概率是前端发送前数据就丢失了，先从前面几点排查吧！

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