如何通过JavaScript向Rails后端发送multipart form data请求

问题原因 #

首先梳理两个错误的根本原因：

• 直接把JS对象play_sessionappend到FormData中时，浏览器会自动调用对象的toString()方法，导致传到后端的是字符串[object Object]，不符合Rails期望的嵌套参数结构，自然无法调用permit方法做参数校验。
• 手动设置Content-Type: multipart/form-data请求头是错误的：当请求体是FormData类型时，浏览器会自动生成带boundary分隔符的Content-Type头，手动设置会覆盖掉分隔符信息，导致Rails无法正确解析表单字段。

修正后的代码 #

async function uploadFile(blob) {
  let formData = new FormData();
  // 按照Rails嵌套参数的命名规则逐个append字段
  formData.append("play_session[comment]", "SUPER GOOD COMMENT");
  formData.append("play_session[time_in_minutes]", 23);
  formData.append("play_session[video]", blob);

  try {
    let response = await fetch(
      "http://localhost:3000/front/play_sessions",
      {
        method: "POST",
        // 只需要指定Accept头，不要手动加Content-Type
        headers: {
          "Accept": "application/json"
        },
        body: formData
      }
    );
    console.log("HTTP response:", response);
  } catch(e) {
    console.log("Huston we have problem...:", e);
  }
}

改造后Rails就能正确解析到嵌套的play_session参数，包含普通字段和上传的文件，和Rails测试用例的参数结构完全对齐。

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