使用fetch上传含非ASCII文件名的FormData时如何设置字符编码？

前端处理方案 #

现代浏览器支持在FormData.append时显式指定文件名，会自动生成符合RFC 5987标准的filename*=UTF-8''<编码后的文件名>格式，替代原有仅支持ISO-8859-1的filename字段。修改代码如下：

var body = new FormData()

body.append('deal', this.deal)
body.append('checksum', await this.checksum(file))
// 显式传入文件名，浏览器自动处理UTF-8编码
body.append('file', file, file.name)
const { data } = await useFetch(`/api/${this.deal}/upload`, {
    method: 'POST',
    headers: { 'X-Token': useToken() },
    body
})

注：若遇到旧浏览器不支持自动生成filename*的情况，可手动编码文件名后传入（如encodeURIComponent(file.name)），但需要后端配合解码该字符串。

后端处理方案 #

如果前端受浏览器兼容性限制无法调整，更可靠的方式是在后端修改multipart请求的解码规则：

• Node.js（Express）场景：使用multer中间件时，可将ISO-8859-1编码的文件名手动转成UTF-8：

const filename = Buffer.from(req.file.originalname, 'latin1').toString('utf8')

• Java（Spring Boot）场景：在配置文件中添加spring.servlet.multipart.charset=utf-8，或在MultipartResolver配置中指定默认编码为UTF-8。

核心说明 #

multipart/form-data标准中，传统filename字段默认使用ISO-8859-1编码，而filename*字段专门支持UTF-8编码。只要服务器能识别filename*字段，或强制用UTF-8解析所有multipart字段编码，即可解决非ASCII文件名的乱码问题。

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