Question

嘿大家。

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

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

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

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

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

<%= f.file_field :image %>

正如标题中所提到的，这个上传发布在亚马逊S3上。我使用＆＃39; fog-aws＆＃39;宝石槽载波在MiniMagick的帮助下以我想要的方式显示图像。还有＆＃39; figaro＆＃39;宝石隐藏我的亚马逊s3的身份证。

我还尝试使用相同的过程更新多个文件。这很好。您可以在此页面上找到我关注的教程：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.

我认为没有必要，因为你应该能够从这个// = require jquery-fileupload的application.js文件中获取它，对吗？

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

jquery

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

只有取消按钮正在工作并删除hr

，这意味着＆＃34;图片＆＃34;我猜。但是上传和删除都不起作用，对于复选框也是如此。

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

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

如果有人可以帮助或至少告诉我我会欣赏它的方式。

谢谢

Answer 1

所以...我在过去的6个小时内试图让这件事发生。我在rails应用程序上成功安装了Yarn和Webpack。根据{{3}}，您可以通过gemfile安装所有内容，而无需再次“rails new”。

默认情况下，当我进入浏览器时，我可以看到消息（javascript / application.js - ＆gt; console.log（来自Webpacker的'Hello World'））。

然而，即使在阅读installation instruction和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：编译

我的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"
  }
}

仍然无法正常工作。我还尝试使用this来修改我的咖啡脚本。结果如下：

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。没关系。

谢谢你的帮助

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

1 个答案: