Question

我最近在我们的Rails应用程序中安装了Fine Uploader。我已经阅读了文档并对其进行了一些实验，但我似乎并不了解这个东西是如何工作的，因此，我在实现它时遇到了很多问题。

我做了什么：安装它（两种方式，一种是“经典”，第二种是使用fineuploader gem，它似乎也是这样）。

创建了一个包含此文件的咖啡文件。

$ ->
  uploader = new (qq.FineUploader)(
    debug: true
    element: document.getElementById('fine-uploader')
    request: endpoint: '/uploads')
    template: 'test-template'

这会创建一个“上传文件”按钮（这当然不起作用，因为在服务器站点上没有配置来处理这个），但是我希望在简单形式的输入字段中有这个按钮

另外，模板不起作用，我真的不明白为什么。

不幸的是，文档缺乏对Rails的帮助。

我愿意将此库更改为其他内容，只要它包含我需要的功能：

暂停并恢复下载
文件分块（如果失败，用户不会被迫重新开始）
进度条（不重要）

Answer 1

我已经成功实现了它，并且我对它的工作方式有了一些了解，所以我将分享这些知识。但我想强烈指出，我自己已经想到了这一点，所以我所提供的内容可能存在缺陷。利用您的知识和经验，如果您认为可以做得更好，那么您可能是对的。

首先，使用npm下载库。我找到了两颗宝石，但不要使用它们。在我写这篇文章的时候，那些宝石已经过时了，而且不会起作用。 Github链接：

github.com/mezis/fineuploader-rails
github.com/zakgrant/fine-uploader-rails

如果您碰巧下载了这些，则必须重新安装库。

之后，您将创建javascript。我创建了一个名为“fine-uploader.coffee”的文件，并将其放在这里：

$ ->
  uploader = new (qq.FineUploader)(
    element: document.getElementById('fine-uploader')
    request:
      endpoint: '/upload'
      params:
        authenticity_token: $('#fine-uploader').data('authenticity-token')
    template: 'template-name'
    chunking:
      enabled: true
      mandatory: true
      success:
        endpoint: "/upload/finish"
)

我不会描述什么是什么，因为所有这些都可以在文档中找到，而是我将专注于对我们来说重要的事情。在“请求”中你有一个端点，在这种情况下，我们需要将它添加到我们的路由中，就像这样。

post 'upload', to: 'uploads#create'

然后，我们需要创建我们的控制器。如您所见，我已经创建了用于处理上传的专用控制器，我建议您这样做。

在上传控制器中，我们有以下动作：

def create
    file = params[:qqfile]

    #code that does whatever you need

    respond_to do |format|
       format.json {
          render json: { success: true }
       }
    end
end

在您的控制器中，您将拥有一些参数（您可以在文档中检查所有参数），但对您来说重要的是qqfile。这将是发布的文件。你可以用它做任何你想做的事。我正在使用carrierwave来保存和处理它，我想这不需要进一步的描述（因为你可以在carrierwave dosc中找到它，你也可以使用别的东西，比如refile）。

您还必须使用令牌添加参数，您可以在javascript文件的第7行中看到它。我建议阅读有关CSRF令牌的内容。

重要的是，如果您选择（像我一样）分块选项，这将不是整个文件，只是它的一部分。你可以找到关于如何处理分开的文件的更大的教程，但你需要注意的是你将用params发送的qquuid。此标识标识正在上载的文件，您将需要它来确定上载的文件属于哪个文件，因此您不要混合两个文件。每个部分都是通过单独的发布请求发送的，因此我建议将qquuid这样的列添加到处理文件的模型中。例如：

Attachment.new(params[:qqfile], params[:qquuid])

保存所有文件后，可以将它们组合起来（查看ruby File类以了解如何）。

Attachment.where(qquuid: params[:qquuid]).combine_them_all

上面的行可以放在它的末尾的create动作中，条件表明这是最后一部分（有序列号的总部件号和当前部件的索引号，可以用来确定那个，或者在“完成”动作中，如果你这样做就可以使用

chunking:
    success:
        endpoint: "/upload/finish"

您必须创建路线（与上面显示的方法相同）和操作。最后一部分发送后将触发此操作。如果文件太小而无法分开，则不会触发此操作，除非您将强制设置为“true”。

最后一件事是，json回应。那部分很简单，精细的上传者希望你回复（用json）你收到的文件，一切顺利。如果它不能得到它，它会假设，出错了（你可以在上传者文档中阅读更多关于预期的json）。重要的是，如果失败，它将尝试再次发送失败的部分（如果autoRetry设置为true）。

现在，对于视图（haml）：

#fine-uploader{"data- authenticity-token" => form_authenticity_token}
%script#template-name
    Here goes the template

有关模板的更多信息，您可以阅读文档，但重要的是，不要使用rails形式（或简单形式）。有一种方法可以将表单与精细上传器连接起来，但我无法使其工作，而且我不需要使用该表单，但如果需要，可以使用生成的令牌创建隐藏字段，识别它，并使用它而不是qquuid来识别文件。您可以以相同的方式在params部分提供它，您已提供CSRF令牌，并在上传控制器的“创建”操作中使用它。

就是这样。我希望它会帮助别人。

编辑：用户Panczo发布了一个示例应用in the comments

带Rails的Fine Uploader形式

1 个答案: