Question

我正在尝试为我的Rails应用程序的所有文件和图像制作一个通用文件上传器。上载器功能与Filestack或Uppy Uploader等流行的JS上载器相同，用户只需在浏览器中选择任何文件，应用程序便会处理该文件并在返回后返回文件的URL。它已上传。现在，有了此URL，我们便可以将其附加到任何表单/所见即所得编辑器/我们喜欢的任何地方，例如在聊天消息中。

为此，我的方法是使用Rails Active Storage进行手动上传。

因此，首先，我创建一个称为Uploader的类，该类链接到Rails Active Storage：

app / models / uploader.rb

class Uploader < ApplicationRecord
  has_one_attached :file
end

然后，我为此上传器创建了一个控制器，其操作名为“文件”，将在其中处理所有文件：

config / routes.rb

post 'uploaders/file' => 'uploaders#file'

app / controllers / uploaders_controller.rb

  def file
    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:uploader][:file],
      filename: params[:uploader][:file].original_filename,
      content_type: params[:uploader][:file].content_type
    )

    @filelink = url_for(blob)

    respond_to do |format|
      format.html { redirect_back(fallback_location: root_path) }
      format.js
    end
  end

最后，这是该上传器的视图：

app / views / new.html.erb

<h3>Select Files To Upload</h3>

<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Save
  <% end %>
<% end %>

问题

所以，我的问题是如何在上述代码中使用JSON，以便获取上载的文件URL？

首先，我将以上代码更改为：

app / controllers / uploaders_controller.rb

  def file
    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:uploader][:file],
      filename: params[:uploader][:file].original_filename,
      content_type: params[:uploader][:file].content_type
    )

    render json: { filelink: url_for(blob) }
  end

app / views / new.html.erb

<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true, :html => {:'data-type' => 'json', :multipart => true} do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Save
  <% end %>
<% end %>

<script type="text/javascript">
  $("#submit-uploader").click(function(e){
    e.preventDefault();

    $.ajax({
      type: "POST",
      dataType: "script",
      url: $(this).parents("form").attr("action"),
      contentType: 'application/json',
      data: JSON.stringify({ file: $("#uploader_file"), _method: 'post' })
    }).done(function( data ){
      console.log(data);
    });
  });
</script>

现在，我正在使用JavaScript通过JSON提交活动存储表单。但是很明显缺少某些内容，因为该脚本目前无法处理任何活动存储。那么，我该如何解决呢？

谢谢！

Answer 1

您可以使用ajax发送文件，这是一个示例：

<%= form_tag uploaders_file_path(@uploader), :html => {:multipart => true} do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Save
  <% end %>
<% end %>

<script type="text/javascript">
  // trigger the form submit 
  $("form").submit(function(evt){   
    evt.preventDefault();
    // get the input with file
    var formData = new FormData($(this)[0]);

    $.ajax({
       url: "<%= uploaders_file_path(@uploader) %>",
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
  })
</script>

使用带有JSON的Active Storage手动上传

1 个答案: