0

嘿大家。

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

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

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

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

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

<%= f.file_field :image %>

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

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

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

这就是为什么我想为 rails 使用jQuery File Upload 的原因。

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

除了这个。即使（再次）是从 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

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

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

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

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

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

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

谢谢

4

1 回答 1

0

所以......我在过去的 6 个小时里努力做到这一点。我在我的 rails 应用程序上成功安装了 Yarn 和 Webpack。根据安装说明，您可以通过 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。真的没关系。

谢谢你的帮助

于 2017-12-05T09:13:51.730 回答