微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ruby-on-rails – 带有Rails形式的Fine Uploader

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

我做了什么:
安装它(两种方式,一种是“经典”,另一种是使用fineuploader gem,它似乎做同样的事情).

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

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

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

此外,模板不起作用,我真的不明白为什么.

不幸的是,文档缺乏对Rails的帮助.

我愿意将这个库更改为其他内容,只要它包含我需要的功能

>暂停和恢复下载
>文件分块(如果失败,用户不会被迫重新开始)
>进度条(不重要)

解决方法

我已经设法使它工作,我对它是如何工作有一些了解,所以我将分享这些知识.但我想强烈指出,我自己已经想到了这一点,所以我所提供的内容可能存在缺陷.利用您的知识和经验,如果您认为可以做得更好,那么您可能是对的.

首先,使用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

上面的行可以放在它的结尾处的创建动作中,条件表明这是最后一部分(有序列号的总部件号和当前部件的索引号,可以使用到确定,或者在“完成”动作中,如果你这样做,你可以使用它

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的示例应用程序

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐