javascript – jQuery Remotipart将[object Object]发送到服务器

我正在尝试使用ajax将文件上传到我的Rails应用程序.为方便起见,我已经包含了jQuery.remotipart gem.

// app/assets/javascripts/application.js
//= require jquery.remotipart

我有一个上传文件的表格.这些文件由CarrierWave处理.

<%= form_for @import, remote: true do |f| %>
  <fieldset>
    <%= f.label :file, "Attach a CSV file" %>
    <%= f.file_field :file %>
  </fieldset>
  <%= f.submit :upload %>

<% end -%>

不幸的是,当我提交附有文件的表单时,它似乎没有正确地到达我的控制器操作. params hash将JS对象字符串化为键.

Started POST "/file_imports" for 127.0.0.1 at 2012-11-06 01:00:49 +0000
Processing by FileImportsController#create as JS
  Parameters: {"object Object"=>{","=>{"object Object"=>{","=>{"object Object"=>nil}}}}}`

在Chrome的开发工具中,我可以看到这确实是发送到服务器的表单数据：

当我删除remote时,表单工作正常：true(当然,在这种情况下,它会发送HTML请求而不是JS请求).

任何人都知道我做错了什么？顺便说一下,我使用的是Rails 3.2.8和Remotipart 1.0.2(最新版).

编辑：做了一些挖掘.

看看Remotipart的来源,我似乎无法理解它应该做什么.例如,在vendor/assets/javascripts/jquery.remotipart.js中,第22行具有以下内容：

settings.data = form.serializeArray();

再向下,设置将通过$.rails.ajax(设置)发送到服务器.

$.fn.serializeArray()方法返回一个JS对象数组.如果我们将它们分配给jQuery.ajax()调用的data属性,那将解释我在服务器上看到的序列化对象参数.我们需要传递一个对象作为数据属性,而不是一个对象数组？

但是,当我尝试将数组展平为一个对象时,整个事情就会中断并且HTML请求被发送到服务器而不是JS服务器.我认为它与jQuery.ajax.processData == false的事实有关.

我有一个issue on the Remotipart Github.

解决方法:

经过大量的调试和阅读大量代码后,我终于获得了使用Rails 3.2.8的最新gem.我被三个陷阱钉了：

(1)我在表单提交之前禁用了我的文件输入字段,这导致remotipart忽略它以包含在iframe提交中.您必须确保已启用文件输入.这是您看到的错误的直接原因.

(2)在我的调试过程中,我使用最新的上游源覆盖了jquery.iframe-transport,并且它不支持iframe中的X-Http-Accepts隐藏变量.您必须使用与remotipart gem捆绑在一起的版本.

(3)如果您使用的是脚本以外的数据类型,请不要忘记为ajax连接回调：在表单上完成.如果未在全局ajax选项中指定dataType,或者在表单上使用data-type属性,则这是缺省值.

标签：javascript,jquery,ruby-on-rails,file-upload,ruby-on-rails-3-2
来源： https://codeday.me/bug/20190901/1784473.html