Rails：s3_direct_upload - 如何保存/使用数据响应？

Posted 2023-03-03

【中文标题】Rails：s3_direct_upload - 如何保存/使用数据响应？

【英文标题】：Rails: s3_direct_upload - How do I save/use the data response?

【发布时间】：2013-09-29 13:05:34

【问题描述】：

我已经在整个 SO 中搜索了答案，所以我确信以前没有人问过这个问题。请救救我吧，救世主！

我正在尝试使用s3_direct_upload gem 来处理将文件直接上传到 S3，但我只是不知道如何查看/使用/保存显然从 S3 服务器返回的数据。我已经阅读了 s3_direct_upload 的自述文件十几次，它提供了一些 JS 代码的示例 sn-ps，但没有告诉我该代码应该放在哪里。

我已经完成了自述文件的第一部分并设置了 AWS 配置和简单的 jQuery

jQuery ->
  $("#s3-uploader").S3Uploader()

在我的 CoffeeScript 中（正确包含在资产管道中）。

我认为这是：

<%= s3_uploader_form callback_url: work_path, callback_param: "work[url]", class: "s3-uploader" do %>
    <%= file_field_tag :file, multiple: false %>
<% end %>

<%= form_for(@work) do |f| %>

    <%= f.label :name, "Title" %>
    <%= f.text_field :name %>
    <%= f.label :category, "Category" %>
    <%= f.text_field :category %>
    <br>
    <%= f.submit "Upload", id: "btn-upload-work", class: "btn btn-large btn-warning btn-upload" %>

<% end %>

我希望用户上传work 并填写一些字段。当用户点击"Upload"按钮时，应该创建一个新的work，属性:url等于上传文件的url，:name和:category属性等于输入的文本用户。然后页面应该重定向到提交作品的show 页面。 README 给出了这个例子：

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
  $('#someHiddenField').val(content.url)

但我不知道将这段代码放在哪里。

这是我的控制器：（我知道create 操作需要更改，但我不知道具体是什么。我用respond_to 试验了几个小时，但无济于事。）

def show
    @work = Work.find(params[:id])
end

def new
    @work = Work.new
end

def create
    @work = current_user.works.new(work_params)
    if @work.save
        flash[:success] = "Work successfully submitted!"
        redirect_to @work
    else
        render 'new'
    end
end

private

    def work_params
        params.require(:work).permit(:name, :category, :url)            
    end

即使阅读了十几遍 README，我仍然不明白 callback_url 到底是什么，callback_param 是什么，以及如何使用它们。更糟糕的是，加载这个视图会报错——Rails 不喜欢callback_url: work_path 部分。我必须将其更改为 work_path(@work) 才能加载它，但我不确定这是否正确（因为我不明白 callback_url）。

从其他人提出的关于 s3_direct_upload 的问题来看，他们似乎已经知道如何使用它（这些问题只是较小的细节）。所以我迷路了，因为我什至一开始就无法让它工作。我对网络前端有点陌生，所以请耐心等待并向我解释一下。非常感谢！

【参考方案1】：

我还是不明白 callback_url 到底是什么，

callback_url 是 gem 完成将文件上传到 s3 后通过 AJAX 发布到的路径。所以work_path(@work) 应该没问题。

$('#myS3Uploader').bind "s3_upload_complete", (e, content) -> $('#someHiddenField').val(content.url)

但我不知道将这段代码放在哪里。

您可以将上述代码放在您放置$("#s3-uploader").S3Uploader() 的同一个coffeescript 文件中。将$('#someHiddenField').val(content.url) 替换为alert(content.url)。这样，如果上传成功，您将收到一条警报消息。

同时将以下代码粘贴到同一个咖啡脚本文件中

$('#myS3Uploader').bind "s3_upload_failed", (e, content) ->
  alert("#content.filename failed to upload : #content.error_thrown")

如果出现错误，上述代码将显示警报。

如果您在提交文件后没有看到这两者中的任何一个，则说明存在其他问题。我强烈推荐使用firebug。它对调试客户端 javascript 函数非常有帮助。在 firebug net 面板中，您可以查看 gem 是否正在调用 s3 服务器。它还会在控制台面板中显示任何 javascript 错误。

【讨论】：

感谢您的快速回复。我看到文件在放入文件后根本没有上传。什么可能会阻止文件上传？

输入上述代码后，您是否收到任何警报？如果不查看 firebug 控制台是否有错误。

我意识到表单代码应该有“s3-uploader”作为id而不是类。该文件现在可以正常上传，但我没有收到任何警报。这很奇怪。 （我会在哪里看到警报？）

一步完成，现在查看您的 Rails 服务器控制台，看看它是否在上传完成后收到请求。

它得到了请求。参数："url"=> ..., "filepath"=> ..., ..., "work"=>"url"=>"..."。一个work 被创建并插入到ActiveRecord 中，只有:url 属性，但这不是我想要的。我只希望能够访问所有参数，因此我将work 与其他文本字段一起保存。 （我仍然没有看到任何警报。）