本质是服务端未正确解析content-disposition头中filename字段的编码，因浏览器对中文文件名编码行为不统一：chrome/edge用utf-8，firefox用rfc 5987（filename*=utf-8''...），旧ie可能用gbk，服务端若按ascii解析会导致乱码。
上传文件后中文名变乱码，本质是服务端没正确解析 Content-Disposition 头里的 filename 字段编码，不是前端 HTML 本身的问题。
为什么 input[type="file"] 提交后服务端拿到的是乱码文件名
浏览器在 multipart/form-data 请求中，对中文文件名的编码行为不统一：Chrome / Edge 默认用 UTF-8 编码 filename，Firefox 会加 filename*=UTF-8''...（RFC 5987），而旧版 IE 可能用系统默认编码（如 GBK）。服务端若只按 ASCII 解析原始 filename="xxx"，就会把 UTF-8 字节流当 Latin-1 读，出现 文件å.txt 这类典型乱码。
- 关键点：HTML 页面本身的
<meta charset="UTF-8">对文件名编码无影响 - 真正起作用的是 HTTP 请求头中 multipart boundary 后的
Content-Disposition字段格式 - 服务端框架（如 Express、Spring Boot、PHP）默认往往不自动解码 RFC 5987 格式
Node.js/Express 中修复中文文件名乱码
Express 原生 multer 中间件默认不处理 filename*，需手动提取并解码：
const multer = require('multer');
const { decode } = require('urlencode');
<p>const storage = multer.diskStorage({
destination: './uploads/',
filename: (req, file, cb) => {
// 优先尝试从 filename<em> 解析（RFC 5987）
const filenameStar = file.originalname.match(/filename\</em>=(?:UTF-8'')([^;]+)/i);
if (filenameStar && filenameStar[1]) {
cb(null, decode(filenameStar[1]));
return;
}
// fallback：直接用 originalname（部分浏览器可能已损坏）
cb(null, file.originalname);
}
});
</p>
- 必须安装
urlencode或rfc5987类库辅助解码 - 不要依赖
file.originalname直接使用——它在某些环境下已被错误转义 - 若用
multer.memoryStorage()，也要在内存 buffer 解析前做同样判断
Java Spring Boot 的常见踩坑点
Spring Boot 2.6+ 默认启用 CommonsMultipartResolver，但对 filename* 支持不稳定。更可靠的方式是禁用自动解析，手动处理：
- 在
application.properties中关闭默认 multipart：spring.servlet.multipart.enabled=false - 用
@RequestBody接收原始byte[]，再用Apache Commons FileUpload手动 parse，调用FileItem.getString("UTF-8") - 若坚持用
MultipartFile，务必检查getOriginalFilename()返回值是否含%——有则说明是 URL 编码，需URLDecoder.decode(name, "UTF-8")
PHP 中最简修复方式
PHP 的 $_FILES['file']['name'] 在 Apache + mod_php 环境下通常已是 UTF-8，但在 Nginx + PHP-FPM 下常为乱码。根本原因是 Nginx 没传原始 header，或 PHP 内部编码被覆盖：
- 确认 Nginx 配置中未设置
charset utf-8;——该指令只影响响应，对请求无效，反而可能干扰 - 在 PHP 脚本开头强制声明：
mb_internal_encoding('UTF-8'); - 对
$_FILES['file']['name']做双重检测：if (preg_match('/[\x80-\xff]/', $name)) { $name = mb_convert_encoding($name, 'UTF-8', 'auto'); } - 更稳妥：改用
apache_request_headers()获取原始Content-Disposition并正则提取
真正棘手的不是怎么写代码，而是你无法控制用户用什么浏览器、什么操作系统上传——所以服务端必须同时兼容 filename 和 filename* 两种格式，且 fallback 到字节级检测。任何只依赖单一字段的方案，在真实环境中都会漏掉某类终端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
