七牛云存储使用教程(Ruby-on-Rails-+-JavaScript)

Posted on   |   In   |   visitors

qiniu

吐槽

写教程之前不得不吐槽一下七牛的官方文档，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'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~>4.2.3'
# Use postgresql as the database for Active Record
.
.
.
gem 'qiniu' #加入七牛云存储gem包
.
.
.

代码清单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
module ApplicationHelper
  private
    def uptoken

      put_policy = Qiniu::Auth::PutPolicy.new(
        "<你的空间名称>",                    # 存储空间
        nil,                           # 最终资源名，可省略，即缺省为“创建”语义
        1800,                          # 相对有效期，可省略，缺省为3600秒后 uptoken 过期
        (Time.now + 30.minutes).to_i  # 绝对有效期，可省略，指明 uptoken 过期期限（绝对值），通常用于调试，这里表示半小时
      )

      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

1
2
3
4
5
6
7
// # Place all the behaviors and hooks related to the matching controller here.
// # All this logic will automatically be available in application.js.
// # You can use CoffeeScript in this file: http://coffeescript.org/

//= require plugins/plupload/moxie
//= require plugins/plupload/plupload.dev
//= require plugins/qiniu/qiniu

初始化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
<!-- 初始化按钮 start -->
<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>
<!-- 初始化按钮 end -->

<!-- 初始化配置 start -->
<script type="text/javascript">
  var uploader = Qiniu.uploader({
    runtimes: 'html5,html4',          //上传模式,依次退化
    browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
    uptoken : '<%= @uptoken %>',
        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
    unique_names: true,
        // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
    save_key: true,
        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
    domain: '<%= Rails.application.config.qiniu_domain %>',
        //bucket 域名，下载资源时用到，**必需**
    container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
    max_file_size: '5mb',           //最大文件体积限制
    // flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
    max_retries: 3,                   //上传失败最大重试次数
    dragdrop: true,                   //开启可拖曳上传
    drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
    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) {
               // 每个文件上传成功后,处理相关的事情
               // 其中 info 是文件上传成功后，服务端返回的json，形式如
               // {
               //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
               //    "key": "gogopher.jpg"
               //  }
               // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
               var domain = up.getOption('domain');
               var res = $.parseJSON(info);
               var sourceLink = domain + res.key; //获取上传成功后的文件的Url
               console.log(info);
               console.log(sourceLink);
        },
        'Error': function(up, err, errTip) {
               //上传出错时,处理相关的事情
        },
        'UploadComplete': function() {
               //队列文件处理完毕后,处理相关的事情
        },
        'Key': function(up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效
            var key = "";
            // do something with key here
            return key
        }
    }
});
</script>
<!-- 初始化配置 end -->

代码清单3.9.5: 完成了这么多复杂的操作后终于可以试试效果了，启动Rails服务器看看吧

1
$ rails server -b $IP -p $PORT

作者

如果教程里面有什么纰漏的地方请给我留言

坚持原创技术分享，您的支持将鼓励我继续创作！