Rails5 + jquery-fileupload-rails +carrierwave + Amazon S3，脚本问题

Question

大家好。

这是我在这里的第一篇文章（可能不是最后一篇……）

我正在构建一个 Rails 应用程序，管理员可以在其中创建配方。每个食谱都列在一个索引上，管理员可以添加诸如标题、成分、您在食谱上花费的时间等内容...

现在我希望能够上传这个食谱的图片。

由于我不知道如何实现这一点，我决定从头开始一个新的应用程序，其中有一个用户名和图片。

我已经实现了为用户（头像）上传图片的基本上传表单：

<%= f.file_field :image %>

正如标题中提到的，此上传在亚马逊 S3 上进行。我在 MiniMagick 的帮助下使用“fog-aws”宝石槽载波以我想要的方式显示图像。还有“figaro”宝石来隐藏我的亚马逊 s3 ID。

我还尝试使用同一进程更新多个文件。 这很好用。您可以在此页面上找到我关注的教程：HERE

但是用户必须等待，并且在上传图片的同时屏幕上并没有真正发生任何事情。也许用户可能会认为出现问题并离开页面并最终感到沮丧或其他什么。

这就是我想到使用jQuery File Upload for rails的原因。

问题是所有教程都非常过时，我找不到任何东西可以正常工作（s3、carrierwave、jquery）。我找到的教程是 2013 年左右的......找不到任何相关的东西。

this one 除外。即使（再次）是从 2014 年开始。

此脚本允许您一次上传多个文件并删除它们等...只需将代码粘贴到任何视图中即可。我试过了，但有很多问题，第一个是这样的：

<%= javascript_include_tag 'jquery.iframe-transport.js' %>
<%= javascript_include_tag 'jquery.fileupload.js' %>
<%= javascript_include_tag 'jquery.fileupload-ui.js' %>

当我尝试代码时，我得到了这个错误：

The asset "jquery.iframe-transport.js" is not present in the asset pipeline.

我认为没有必要，因为您应该能够使用此 //= 需要 jquery-fileupload 从 application.js 文件中获取它，对吧？

当我删除这些行时，脚本正在加载，但它看起来像这样：

jquery

如您所见，您可以选择文件，但它应该显示如下图。

只有取消按钮在工作并删除小时

---

这意味着我猜的“图片”。但是上传和删除不起作用，复选框也是如此。

任何人都可以帮助我以某种方式完成这项工作吗？

问题可能来自 s3 ？还是脚本问题？我从来没有编写过 java 代码，所以我真的看不出它在哪里可能是错误的。

如果有人可以帮助或至少向我展示我将不胜感激的方式。

谢谢

Answer 1

所以...我在过去的 6 个小时里努力做到这一点。我在我的 rails 应用程序上成功安装了 Yarn 和 Webpack。根据installation instruction，您可以通过 gemfile 安装所有内容，而无需再次“rails new”。

默认情况下，当我打开浏览器时，我可以看到消息（javascript/application.js -> console.log('Hello World from Webpacker')）。

尽管如此，即使在阅读 this 和 this 之后，我也不明白一切是如何工作的。

我尝试使用 Refile Gem 进行上传。一切正常。我想（正如我的第一篇文章所示）创建一个进度条。我有一个咖啡脚本。我把我的脚本放在 my_app/javascript/users.coffee 和 application.js 我写了这个：

require(users.coffee)

我有一个错误。 然后我试着写这个：

//= require refile
//= require popper
//= require bootstrap
//= jquery
//= require_tree .

我又遇到了一个错误。

这是我的咖啡脚本：

jQuery ->
  $(document).on "upload:start", "form", (e) ->
    $(this).find("input[type=submit]").attr "disabled", true
    $("#progress-bar").slideDown('fast')

  $(document).on "upload:progress", "form", (e) ->
    detail          = e.originalEvent.detail
    percentComplete = Math.round(detail.loaded / detail.total * 100)
    $('.progress-bar').width("#{percentComplete}%");
    $("#progress-bar-text").text("#{percentComplete}% Complete")

  $(document).on "upload:success", "form", (e) ->
    $(this).find("input[type=submit]").removeAttr "disabled"  unless $(this).find("input.uploading").length
    $("#progress-bar").slideUp('fast')

顺便说一下，我的application.html.erb改成了这个

<%= javascript_pack_tag 'application' %>

我还 bin/yarn 添加 refile 和 rails webpacker:compile

我的 package.json 的结果：

{
  "name": "UploadRefile",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "coffeescript": "1.12.7",
    "jquery": "^3.2.1",
    "refile": "^0.2.11"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.5"
  }
}

还是不行。 我还尝试使用decaffeinate 来修改我的咖啡脚本。结果是这样的：

jQuery(function() {
  $(document).on("upload:start", "form", function(e) {
    $(this).find("input[type=submit]").attr("disabled", true);
    return $("#progress-bar").slideDown('fast');
  });

  $(document).on("upload:progress", "form", function(e) {
    const { detail }          = e.originalEvent;
    const percentComplete = Math.round((detail.loaded / detail.total) * 100);
    $('.progress-bar').width(`${percentComplete}%`);
    return $("#progress-bar-text").text(`${percentComplete}% Complete`);
  });

  return $(document).on("upload:success", "form", function(e) {
    if (!$(this).find("input.uploading").length) { $(this).find("input[type=submit]").removeAttr("disabled"); }
    return $("#progress-bar").slideUp('fast');
  });
});

再次出错。

任何人都可以带我去某事吗？因为我真的无法前进。我是一个有耐心的人，但我不了解 webpack 过程。即使他们说相反，解释也很混乱。我只是想让进度条正常工作。使用carrierwave或refile。真的没关系。

感谢您的帮助