Angular 4项目中文件上传时如何同时携带JSON映射数据？

嘿，这个需求其实很好实现——只需要在你现有的FormData对象里额外添加一个字段，把JSON映射信息转成字符串传进去就行。

你当前的文件上传逻辑已经是正确的，现在只需要加一行代码，把你的JSON对象序列化后添加到FormData中。具体修改后的代码如下：

// 先定义你的文件映射信息JSON对象（示例结构，你可以根据实际需求调整）
const fileMappingInfo = {
  fileType: 'invoice',
  relatedOrderId: 'ORD-2024-001',
  uploadTimestamp: new Date().toISOString()
};

let formData = new FormData();
formData.append('file', this.files[0], this.files[0].name);
// 将JSON对象转成字符串，添加到FormData的新字段里
formData.append('fileMapping', JSON.stringify(fileMappingInfo));

let headers = new HttpHeaders();
headers.delete('Content-Type');
this.httpClient.post('url', formData, {headers: headers}).subscribe(
  res => console.log('上传成功', res),
  err => console.error('上传出错', err)
);

几个关键注意事项： #

• 后端接收请求时，需要从FormData中取出fileMapping字段，再通过对应的语言方法把字符串解析回JSON对象（比如Java用JSON.parseObject()，Python用json.loads()）。
• 你之前删除Content-Type的操作是对的，FormData会自动生成正确的multipart/form-data请求头，手动设置反而可能导致格式错误。
• 不管你的映射信息结构多复杂，只要是合法的JSON对象，JSON.stringify()都能正确序列化，完全不用担心兼容性问题。

这样修改后，你的请求就会同时携带文件和对应的映射信息啦！

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