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

【问题标题】：Manual uploads using Active Storage with JSON使用带有 JSON 的 Active Storage 手动上传
【发布时间】：2019-03-03 17:58:41
【问题描述】：

我正在尝试为我的 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

然后，我为这个 Uploader 创建了一个控制器，其中包含一个名为“file”的操作，所有文件都将在其中处理：

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

最后，这是这个 Uploader 的视图：

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 提交活动存储表单。但显然缺少一些东西，因为脚本目前不处理任何活动存储。那么，我该如何解决呢？

谢谢！

【问题讨论】：

您不能以 json 格式发送文件。这永远不会起作用JSON.stringify({ file: $("#uploader_file"), _method: 'post' })
@Зелёный 是的，我想是的。那么我可以使用什么解决方案呢？

标签： ruby-on-rails json file-upload ruby-on-rails-5 rails-activestorage

【解决方案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>

【讨论】：