解决antd Upload组件韩文文件名上传乱码问题

韩文文件名上传后出现乱码（如다운로드.jfif变为ë¤ì´ë¡ë_.jfif），本质是UTF-8编码的文件名被错误解析为ISO-8859-1编码导致的，以下是具体解决方法：

前端处理方案 #

1. 自定义上传请求，手动编码文件名 #

通过customRequest覆盖默认上传逻辑，对文件名进行URI编码后再上传：

import axios from 'axios';

const customRequest = async ({ file, onSuccess, onError }) => {
  const formData = new FormData();
  // 对韩文文件名进行URI编码
  const encodedFileName = encodeURIComponent(file.name);
  formData.append('image', file, encodedFileName);
  
  try {
    const res = await axios.post('/your-upload-api', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    onSuccess(res.data);
  } catch (err) {
    onError(err);
  }
};

在Upload.Dragger中添加该配置：

<Upload.Dragger
  name="image" 
  multiple            
  listType="picture"
  onChange={onChangeImages}
  beforeUpload={onBeforeUpload}                        
  onPreview={onImagePreview}
  customRequest={customRequest} // 新增自定义上传逻辑
>
  {/* 原有内容 */}
</Upload.Dragger>

2. 修改beforeUpload处理文件名 #

若无需完全自定义上传，可在beforeUpload中对文件名编码（需配合后端解码）：

const onBeforeUpload = (file) => {
  // 重命名文件对象的name属性为编码后的值
  file.name = encodeURIComponent(file.name);
  return true;
};

后端处理方案（核心解决环节） #

大部分乱码问题出在后端接收时未正确解码，需根据后端语言调整：

Java Spring Boot示例 #

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.nio.charset.StandardCharsets;

@PostMapping("/upload")
public String uploadFile(@RequestParam("image") MultipartFile file) {
  String originalName = file.getOriginalFilename();
  // 将ISO-8859-1编码的文件名转成UTF-8
  String decodedName = new String(originalName.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
  // 执行文件保存逻辑
  return decodedName;
}

Node.js Express示例 #

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer();

app.post('/upload', upload.single('image'), (req, res) => {
  // 手动转码解决乱码
  const fileName = req.file.originalname;
  const decodedFileName = decodeURIComponent(escape(fileName));
  // 保存文件逻辑
  res.send(decodedFileName);
});

服务器配置补充 #

• Tomcat：在server.xml的Connector标签添加URIEncoding="UTF-8"
• Nginx：在server或location块添加charset utf-8;

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