Angular 5中FormData含特殊字符(ÖÄÜ)上传文件时编码异常问题

你遇到的这个问题很典型：当FormData同时包含带特殊字符的文本字段和文件时，文本内容与文件名出现乱码，但单独传输文本时却正常。本质原因是当FormData里存在File/Blob对象时，浏览器及Angular HttpClient默认生成multipart/form-data请求时，没有明确指定UTF-8编码来处理文本类内容（包括字段值和文件名）。

下面是两种经过验证的有效解决方案：

方案1：让浏览器自动生成规范的Content-Type头 #

Angular HttpClient在发送含文件的FormData时，如果你不手动设置Content-Type，浏览器会自动生成包含正确boundary和charset=utf-8的请求头，从根源解决编码问题。

修改你的请求代码，要么移除手动设置的Content-Type（如果之前加过），要么显式设置为undefined：

this.http.post(`uploadURL`, formData, {
  headers: new HttpHeaders({
    // 让浏览器自动构造符合标准的请求头，包含boundary和UTF-8编码
    'Content-Type': undefined
  })
})
.subscribe(
  data => console.log('success'),
  error => console.log(error)
);

这么做的核心是让浏览器全权处理multipart/form-data的请求头构造，它会自动添加charset=utf-8参数，确保所有文本内容都以UTF-8编码传输。

方案2：将文本字段包装为Blob（强制UTF-8编码） #

如果方案1效果不佳，你可以手动把带特殊字符的文本字段包装成Blob对象，明确指定UTF-8编码后再加入FormData：

let formData: FormData = new FormData();
// 用Blob包装文本，强制指定UTF-8编码
const textBlob = new Blob(['ÖÄÜ'], { type: 'text/plain; charset=utf-8' });
formData.append('value1', textBlob);
// 文件部分保持原有逻辑
formData.append('uploadFile', file, file.name);

// 发送请求（同样建议不手动设置Content-Type）
this.http.post(`uploadURL`, formData)
.subscribe(
  data => console.log('success'),
  error => console.log(error)
);

这种方式直接强制文本字段以UTF-8编码被FormData处理，规避了浏览器默认编码的不确定性。

额外提示：文件名的兼容性处理 #

部分服务器可能对UTF-8编码的文件名解析存在兼容问题（需要遵循RFC 5987标准）。如果服务器端仍无法正确识别文件名，可以尝试手动编码文件名后再传入：

const encodedFilename = encodeURIComponent(file.name);
formData.append('uploadFile', file, encodedFilename);

之后在服务器端对文件名进行解码即可。

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