我做了什么:
安装它(两种方式,一种是“经典”,另一种是使用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 举报,一经查实,本站将立刻删除。