如何将JS Base64文件转换为适配Java MultipartFile的格式？

问题核心分析 #

从你提供的Java接口定义来看，这个端点明确要求以multipart/form-data格式接收文件，且通过@RequestParam("param 1")绑定表单字段——这意味着两个关键要求：

• 请求必须使用multipart/form-data媒体类型
• 表单字段名必须和param 1完全一致（包括空格）

你之前的两次尝试分别踩了两个坑：

1. 最初用application/json提交Blob，完全不符合multipart格式要求，直接触发415错误
2. 改用FormData后，大概率是表单字段名不匹配或Blob构造有误，导致后端接收不到文件对象

正确代码实现 #

步骤1：Base64转Blob（处理前缀+正确构造字节数组） #

如果你的Base64字符串带有data:image/png;base64,这类前缀，必须先移除，否则转出来的文件会损坏：

const handleFilesCallback = async (result) => {
  // 移除Base64前缀（如果存在）
  const cleanBase64 = result.value.content.replace(/^data:.+;base64,/, '');
  const byteChars = atob(cleanBase64);
  const byteArray = new Uint8Array(byteChars.length);
  
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  
  // 尽量指定文件实际MIME类型，不确定时用application/octet-stream兜底
  const fileBlob = new Blob([byteArray], { type: "application/octet-stream" });
  sendFile(fileBlob);
};

步骤2：用FormData提交请求（关键：字段名匹配+不手动设置Content-Type） #

不要手动设置Content-Type，fetch会自动添加带边界标识的正确头，同时确保表单字段名和后端@RequestParam完全一致：

const sendFile = async (fileBlob) => {
  try {
    const formData = new FormData();
    // 第一个参数必须是"param 1"，和后端@RequestParam的参数名完全匹配
    formData.append("param 1", fileBlob, "your-filename.ext");
    
    const response = await fetch("javaApiUrl", {
      method: "POST",
      body: formData
      // 禁止手动设置Content-Type，否则会丢失multipart边界标识
    });
    
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error("上传错误：", error);
    throw error;
  }
};

排查要点 #

1. 字段名严格匹配：后端参数名是param 1（带空格），FormData的append第一个参数必须完全一致，不能写成param1或多空格
2. Blob类型正确：尽量使用文件实际的MIME类型（比如图片用image/jpeg），避免空类型导致后端解析异常
3. 不要手动设置Content-Type：手动设置会丢失multipart请求必需的边界标识，让fetch自动处理即可
4. Base64前缀必须移除：如果保留前缀，转出来的Blob会包含无效数据，后端无法识别为合法文件

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