远程真实表单上的活动存储。无效的真实性错误和错误的控制器格式答案

【问题标题】：Active Storage on a remote true form. Invalid Authenticity error and wrong controller format远程真实表单上的活动存储。无效的真实性错误和错误的控制器格式
【发布时间】：2019-04-10 23:44:35
【问题描述】：

在将我的应用程序升级到 Rails 5.2 后，我找到了一些时间来研究 Active Storage。按照指南，我已经安装并运行了必要的迁移。

在我的用户模型上，我想按照此处的示例附加一个头像：Edge Guide for Active Storage

我在提交表单时收到的错误是ActionController::InvalidAuthenticityToken

<%= form_for @user, remote: true do |f| %>
  <%# Other user fields redacted %>

  <div class="form-group">
    <%= f.label :avatar %>
    <%= f.file_field :avatar %>
  </div>

  <%= f.submit "Save", remote: true %>

<% end %>

我将 form_for 更改为包含 authenticity_token: true，如下所示：

<%= form_for @user, remote: true, authenticity_token: true do |f| %>

这消除了我的真实性错误并将文件插入到我的数据库中，但这导致了未知格式错误，因为它使用 html 而不是 js 路由到我的控制器。

日志：

Started PATCH "/users/22" for 127.0.0.1 at 2018-11-07 13:36:22 +0000
Processing by UsersController#update as HTML

Disk Storage (5.7ms) Uploaded file to key: aJQ3m2skk8zkHguqvhjV6tNk (checksum: 7w6T1YJX2LNIU9oPxG038w==)
ActiveStorage::Blob Create (23.6ms)  INSERT INTO `active_storage_blobs` (`key`, `filename`, `content_type`, `metadata`, `byte_size`, `checksum`, `created_at`) VALUES ('aJQ3m2skk8zkHguqvhjV6tNk', 'Dq3gtJjU0AAbdIj.jpg-large.jpeg', 'image/jpeg', '{\"identified\":true}', 50642, '7w6T1YJX2LNIU9oPxG038w==', '2018-11-07 13:36:22')
ActiveStorage::Attachment Create (3.4ms)  INSERT INTO `active_storage_attachments` (`name`, `record_type`, `record_id`, `blob_id`, `created_at`) VALUES ('avatar', 'User', 22, 1, '2018-11-07 13:36:22')
 (9.4ms)  ROLLBACK
Completed 406 Not Acceptable in 630ms (ActiveRecord: 93.1ms)

ActionController::UnknownFormat (ActionController::UnknownFormat):

用户#更新

def update
  respond_to do |format|

    if @user.update(user_params)
      flash.now[:notice] = 'User saved successfully!'
      format.js do
        @users = User.all
      end
    else
      flash.now[:alert] = @user.errors.full_messages.to_sentence
      format.js do
        @users = User.all
        render layout: false, content_type: 'text/javascript'
      end
    end

  end
end

关于为什么它被提交为 HTML 而不是 JS 的任何想法？

编辑：表单标记

<form class="edit_user" id="edit_user_22" enctype="multipart/form-data" action="/users/22" accept-charset="UTF-8" data-remote="true" method="post">

【问题讨论】：

您检查过表单标记吗？你能验证表单属性上确实有data-remote="true"吗？
是的，已将此添加到我的帖子中。只是补充一下 - 在我向其中添加活动存储之前，此表单运行良好。
您的表单正在使用 POST 方法。尝试将method: :patch 添加到您的form_for 标签
您可以在提交按钮上删除remote: true 并重试吗？当在你的表单中将 remote 设置为 true 时，它总是运行到 update.js.erb 文件。不需要 format.js 做...
@NMPennypacker - 添加method: :patch 仍然会在表单标记中产生method="post"。在我的浏览器中将其更改为method="patch" 会导致表单尝试提交到显示操作！ @Dapeng114 - 不幸的是，从提交按钮中删除 remote: true 得到了相同的结果。感谢您提供有关 format.js 的提示！

标签： ruby-on-rails rails-activestorage

【解决方案1】：

也转换到 Active Storage 并卡在这里。但是（我记得）在我之前的实现中，我使用github/jQuery-File-Upload 解决了（事实证明）同样的问题：

Rails.fire($("#form_id")[0], 'submit');

这是一个 rails-ujs 方法，我从这个 Q/A 中得到：/with-rails-ujs-how-to-submit-a-remote-form-from-a-function

据我所知，这一切都源于以下事实：

直接调用 form.submit() 方法时不会引发事件——提交——MDN：
— https://developer.mozilla.org/en-US/docs/Web/Events/submit
— https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
— https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

【讨论】：

【解决方案2】：

经过多次试验和错误，它使用了 Active Storage 的直接上传功能才能使其正常工作。请允许我解释一下我的发现：

remote: true, multipart: true 一起玩不好。有关更多详细信息，请参阅此 stack overflow 帖子。本质上，您需要使用 jQuery 或 gem 来远程提交文件。

关注此edgeguides 帖子（直接上传）。好像当您单击提交时；直接上传将捕获提交事件并将文件直接提交到云服务器（或在我的开发案例中为本地）。然后它将在表单提交中使用该图像的reference，而不是提交实际的图像。

这用JS打到了我的Users#update，并成功附加了头像。

【讨论】：