如何将多部分表单数据从 js 发送到 Rails？答案

【问题标题】：How to send multipart form data from js to Rails?如何将多部分表单数据从 js 发送到 Rails？
【发布时间】：2021-09-24 20:05:40
【问题描述】：

这就是我对控制器进行测试的方式，只是为了显示请求结构的工作原理：

post(
  :create,
  params: {
    play_session: {
      comment: "COMMENT",
      time_in_minutes: 10,
      video: fixture_file_upload("video.webm")
    }
  }
)

我正在尝试通过以下方式从 JS 到达此端点：

async function uploadFile(blob) {
  let play_session = { comment: "SUPER GOOD COMMENT", time_in_minutes: 23, video: blob };
  let formData = new FormData();
  formData.append("play_session", play_session);

  try {
    let response =
      await fetch(
        "http://localhost:3000/front/play_sessions",
        {
          method: "POST",
          body: formData
        }
      );

    console.log("HTTP response:", response);
  } catch(e) {
    console.log("Huston we have problem...:", e);
  }
}

但我在 Rails 控制台中收到此错误：

Started POST "/front/play_sessions" for ::1 at 2021-09-24 22:00:30 +0200
Processing by Front::PlaySessionsController#create as */*
  Parameters: {"play_session"=>"[object Object]"}
Completed 500 Internal Server Error in 3ms (Allocations: 1717)

NoMethodError (undefined method `permit' for "[object Object]":String):

我尝试向fetch 调用添加标题，如下所示：

await fetch(
  "http://localhost:3000/front/play_sessions",
  {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "multipart/form-data"
    },
    body: formData
  }
);

然后我在 Rails 控制台中出现此错误：

Started POST "/front/play_sessions" for ::1 at 2021-09-24 22:02:59 +0200
Processing by Front::PlaySessionsController#create as JSON
  Parameters: {"------WebKitFormBoundaryESNX0mluVZ8VIiry\r\nContent-Disposition: form-data; name"=>"\"play_session\"\r\n\r\n[object Object]\r\n------WebKitFormBoundaryESNX0mluVZ8VIiry--\r\n"}
Completed 400 Bad Request in 1ms (Allocations: 520)


ActionController::ParameterMissing (param is missing or the value is empty: play_session
Did you mean?  ------WebKitFormBoundaryESNX0mluVZ8VIiry
Content-Disposition: form-data; name
              action
              controller):

【问题讨论】：

FormData 的追加期望值为字符串或文件。尝试像formData.append('play_session[comment]', 'super good comment) 一样逐个附加哈希。如果可行，我会发布答案:)
@razvans 砰！在目标中；）。它有效，您可以发布答案

标签： javascript ruby-on-rails fetch multipartform-data

【解决方案1】：

FormData 的 append 接受 name、value 对，其中 value 可以是字符串或 Blob。

价值

字段的值。这可以是 USVString 或 Blob（包括 File 等子类）。如果没有指定这些值，则将值转换为字符串。

在这里，formData.append("play_session", play_session) 你分配了一个对象。

因为 Rails 很聪明，可以在 params 中创建 Hashes & Arrays，所以需要将 play_session 中的参数一一追加：

let formData = new FormData();
formData.append('play_session[comment]', 'SUPER GOOD COMMENT')
formData.append('play_session[time_in_minutes]', 23)
formData.append('play_session[video]', blob)

对于嵌套属性，您应该这样做：

formData.append('play_session[user_attributes][name]', 'Jack');

对于数组：

formData.append('play_session[user_ids][]', "1");
formData.append('play_session[user_ids][]', "2");

【讨论】：