吐槽 写教程之前不得不吐槽一下七牛 的官方文档,API的说明是很全面,但是读起来超蛋疼。为什么这么说呢,按照我以往的看API的文档都会有示例代码跑起来帮助理解,而七牛的API文档对于刚接触这种第三方服务商SDK的开发者来说不是太友好。建议七牛借鉴下百度地图SDK 的文档写法。
初识 七牛云存储是一家专注云存储领域的技术公司,提供云存储、云处理、云加速分发一站式服务,持续追求高可靠、高可用、高性能、高响应速度,推动客户健康稳定地快速发展。(前面是广告)
以往开发项目时总会遇到上传文件的问题,譬如上传速度、断点续传、资源服务器部署等等。存在自己的服务器上面,维护成本高。那如何解决这些问题呢,有需求就有市场,云存储应运而生,把这些处理统统放到云存储上,只需要进行API调用即可,而这次我们选中了七牛云存储,便宜,好用,快速。(广告打了一大堆,进入正题吧)
使用 教程正式开始
注册 使用前得先注册一个七牛云存储的账号,—>注册传送门<—
登录认证 登录之后查看你的账号身份认证,完成认证解锁更多功能
获取AK, SK,空间域名 这两个KEY值是用来生成上传凭证的
配置服务器环境 在使用七牛云存储前我们先要配置好上传凭证
的生成环境
代码清单3.6.1: 导入七牛云存储的gem
包Gemfile
1 2 3 4 5 6 7 8 9 10 11 12 13 source 'https://rubygems.org' gem 'rails' , '~>4.2.3' . . . gem 'qiniu' . . .
代码清单3.6.2: 然后重新bundle
我们的项目会看到安装了很多gem
包
1 2 3 4 5 6 7 8 9 10 $ bundle install . . . Using qiniu 6.5.1 . . . Bundle complete! 17 Gemfile dependencies, 66 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed.
如果有提示安装失败或是无法安装一些国外的镜像可修改Gemfile
的源到淘宝源或是自行翻墙,推荐一款翻墙工具Shadowsocks
配置AccessKey/SecretKey 代码清单3.7.1: 新建qiniu_sdk.rb
文件,将3.3节获取到的AK,SK,空间域名地址输入下面代码config/initializers/qiniu_sdk.rb
1 2 3 4 5 6 7 8 #!/usr/bin/env ruby require 'qiniu' Qiniu.establish_connection! :access_key => '<输入你的AK>' , :secret_key => '<输入你的SK>' Rails.application.config.qiniu_domain = "<空间域名地址>"
生成上传凭证 代码清单3.8.1: 这个方法我会包装到Helper里面app/helpers/application_helper.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 module ApplicationHelper private def uptoken put_policy = Qiniu::Auth::PutPolicy.new( "<你的空间名称>" , nil , 1800 , (Time.now + 30 .minutes).to_i ) uptoken = Qiniu::Auth.generate_uptoken(put_policy) end end
到目前为止我们以及完成了服务端的所有配置,当我们的文件上传时,是不经过我们自己的服务器的,由客户端通过Ajax请求七牛的API再将返回的文件名存入我们的服务器。接下来就是客户端的配置
导入七牛JavaScriptSDK —>下载JavaScriptSDK传送门<—
代码清单3.9.1: 为了代码易于管理我们将七牛的JavaScriptSDK文件放到app/assets/javascripts/plugins
目录
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - app - assets + fonts + images - javascript - plugins - plupload moxie.js plupload.dev.js plupload.full.min.js - qiniu qiniu.js qiniu.min.js application.js + stylesheets
代码清单3.9.2: 引用SDK到application.js
app/assets/javascripts/application.js
初始化javascript 在完成以上操作之后我们就可以正式使用七牛云存储了
代码清单3.9.3: 在controller
中引入helper
方法,传入上传凭证app/controllers/uploads_controller.rb
1 2 3 4 5 6 7 8 class UploadsController < ActionController::BaseController include ApplicationHelper def index @uptoken = uptoken end end
代码清单3.9.4: 代码清单在视图文件中使用app/views/upload/index.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <div class ="col-md-12" > <div id ="container" style ="position: absolute; top: 50px;" > <a class ="btn btn-default btn-lg " id ="pickfiles" href ="#" style ="position: relative; z-index: 1;" > <i class ="fa fa-plus" > </i > <span > 选择文件</span > </a > </div > </div > <script type ="text/javascript" > var uploader = Qiniu.uploader({ runtimes: 'html5,html4' , browse_button: 'pickfiles' , uptoken : '<%= @uptoken %>' , unique_names: true , save_key: true , domain: '<%= Rails.application.config.qiniu_domain %>' , container: 'container' , max_file_size: '5mb' , max_retries: 3 , dragdrop: true , drop_element: 'container' , chunk_size: '1mb' , auto_start: true , init: { 'FilesAdded' : function (up, files ) { plupload.each(files, function (file ) { }); }, 'BeforeUpload' : function (up, file ) { }, 'UploadProgress' : function (up, file ) { }, 'FileUploaded' : function (up, file, info ) { var domain = up.getOption('domain' ); var res = $.parseJSON(info); var sourceLink = domain + res.key; console .log(info); console .log(sourceLink); }, 'Error' : function (up, err, errTip ) { }, 'UploadComplete' : function ( ) { }, 'Key' : function (up, file ) { var key = "" ; return key } } }); </script >
代码清单3.9.5: 完成了这么多复杂的操作后终于可以试试效果了,启动Rails服务器看看吧
1 $ rails server -b $IP -p $PORT
作者 如果教程里面有什么纰漏的地方请给我留言
七牛云存储使用教程(Ruby-on-Rails-+-JavaScript)