Rails - 远程图像上传仅在移动设备上不起作用答案

【问题标题】：Rails - Remote Image Upload not working ONLY on Mobile DevicesRails - 远程图像上传仅在移动设备上不起作用
【发布时间】：2020-07-31 21:49:48
【问题描述】：

我有一个 Rails 4.2.8 (Ruby 2.5.1) 应用程序，使用 Carrierwave 和 Remotipart 通过 Ajax 上传图像（使用 remote: true。一切在台式机或平板电脑上都很好用，但是当我尝试从移动设备（无论是在生产中还是使用 ngrok 来隧道我的本地版本）远程表单从未真正提交。

基本上发生的情况是文件名从“选择文件”输入按钮旁边迅速消失，而是显示“未选择文件”，该按钮立即被禁用（由于data: disable_with: 属性）并永远保持这种状态。 Post 请求永远不会运行/永远不会访问我的服务器。

到目前为止，我只在 IOS 设备上进行了测试，这就是它失败的地方。我还在我的 Macbook 上使用 Chrome 开发工具中的移动布局进行了测试，它从那里运行良好。否则，在 IOS 设备上，Chrome 和 Safari 都会发生这种情况。

Post 请求从未真正触及我的服务器这一事实让我感到困惑。我发现这个问题是关于 Rails https://github.com/rails/rails/issues/17947 在提交空文件表单时抛出错误，但没有错误。文件就这样消失了。当我将手机插入 Mac 上的 safari 开发工具时，文件字段会在我选择文件时填充文件的值，但是一旦我点击提交，该字段就会被清除为 ""，我看到的都是在网络选项卡上有两个空白的about:blank 响应，一个是 js 类型，一个是其他类型

下面是我的表单本身。我的日志中没有出现Post 请求，所以我认为它不可能来自控制器或其他地方。最后，我尝试使用 Chrome 的移动检查工具 Chrome:://inspect，据我所知，没有出现任何 javascript 错误。

如果有人对我在调试过程中下一步可以去哪里有任何想法，我将非常感谢您的帮助。

<%= simple_form_for current_user.profile, url: profiles_photo_step_path, method: :post, remote: true do |f| %>
  <div class="carrierwave-button-div">
    <%= f.input :image, as: :file, label: false %>
   </div>       
   <%= f.submit "Submit", class: "btn btn-default", data: {disable_with: "Submitting..."}  %>
   <div class="primary-center-text" style="margin-top: 15px; padding: 10px 5px 5px 5px;">
     <a href="#sign-up-complete" class="skip-step-link blue-link" id="skip-photo-link">Skip for now</a>
   </div>

<% end %>

【问题讨论】：

可以绑定到:onchange => "readURL(this)"吗？你能添加那个函数的定义吗？
很遗憾没有。我只是删除了 :onchange 属性，它没有任何区别（它在那里可以显示图像预览，但我删除了所有额外的花里胡哨，它的行为仍然相同。
我尝试过的唯一使它起作用的方法是删除remote: :true，但根据它所属的分步过程，它需要使用ajax 提交。同样，remote: true 在桌面浏览器中也能正常工作。

标签： ios ruby-on-rails ajax mobile file-upload

【解决方案1】：

好的，一旦我发现remote: true 是问题所在，我会因为不早点尝试而感到愚蠢，但我会发布我的解决方案，以防万一将来有人遇到这个非常具体的问题。

我按照gem documentation 使用gem 'remotipart', '~> 1.2'。我升级到remotipart 1.4.4，表单提交了文件。

【讨论】：