React中用Fetch API将JSON字符串模拟文件上传至第三方CDN接口

核心问题分析 #

你之前的错误有两个：一是把Blob URL传给FormData，后端拿到的只是字符串而非文件内容；二是手动设置multipart/form-data请求头，破坏了浏览器自动生成的表单分隔符，导致后端无法解析文件。

1. 将JSON文本转为接口认可的带文件名文件对象 #

不需要用Blob URL，直接把用户输入的JSON字符串包装成File对象（或Blob对象+指定文件名），接口就能识别：

// 假设jsonText是从React文本框获取的内容（比如通过useState的state值）
const jsonText = "<用户输入的JSON字符串>";
// 转成带文件名的File对象，文件名可自定义（比如data.json）
const file = new File([jsonText], "data.json", { type: "application/json" });

如果偏好使用Blob，也可以这样写（效果一致）：

const blob = new Blob([jsonText], { type: "application/json" });
// 后续append到FormData时指定文件名

2. 构建匹配curl的Fetch请求 #

• 不要手动设置multipart/form-data头，浏览器会自动生成带分隔符的正确请求头
• 直接把File/Blob对象append到FormData，而非Blob URL
• 仅保留x-auth-token身份验证头

完整React场景示例代码：

import { useState } from "react";

function JsonUploader() {
  const [jsonText, setJsonText] = useState("");
  const token = "<你的授权token>";
  const apiEndpoint = "https://endpoint.url.here";

  const handleUpload = async () => {
    try {
      // 把JSON文本转成带文件名的File对象
      const file = new File([jsonText], "data.json", { type: "application/json" });
      
      // 构建FormData
      const formData = new FormData();
      formData.append("file", file); // 对应curl中的-F 'file=@path/to/file'

      // 发送请求
      const response = await fetch(apiEndpoint, {
        method: "PUT",
        headers: {
          "x-auth-token": token,
          // 不要加Content-Type: multipart/form-data！
        },
        body: formData,
      });

      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }

      const result = await response.json();
      alert("JSON文件更新成功！");
      console.log(result);
    } catch (error) {
      console.error("更新失败：", error);
      alert("更新失败，请检查输入或重试");
    }
  };

  return (
    <div>
      <textarea
        value={jsonText}
        onChange={(e) => setJsonText(e.target.value)}
        placeholder="输入JSON内容"
        rows={10}
        cols={50}
      />
      <button onClick={handleUpload}>更新JSON文件</button>
    </div>
  );
}

export default JsonUploader;

关键注意事项 #

• 为什么不能用Blob URL？：Blob URL是浏览器内部的临时地址，传给后端后，后端仅能拿到这个字符串，无法获取实际文件内容，因此会提示“no file provided”。
• 为什么不手动设置multipart/form-data？：浏览器处理FormData时，会自动生成包含boundary（表单分隔符）的请求头，手动设置会丢失该分隔符，导致后端无法正确解析表单数据。
• 文件名的必要性：接口需要文件名来识别上传的文件（对应curl命令中@path/to/file的文件名部分），必须通过File构造函数或FormData.append的第三个参数指定。

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