七牛环境搭建

创建项目

注册七牛账号, 进入开发者中心. 点击对象存储.

然后创建项目.

安装七牛的包. 由于七牛的包还依赖一个叫moxie的包. 所以moxie也要安装. moxie放在vendors/目录中

npm i qiniu

创建server.js文件

点击这里查看源代码.
七牛提供客户端上传和服务端上传, 不管哪一种上传方式, 我们都要进行有一个授权凭证, 即uptoken. 七牛授权凭证包括AccessKey和SecretKey. 可以在这里查看.

一个用户可以创建多个AccessKey和SecretKey.
我们选取一组AccessKey和SecretKey进行授权. 由于AccessKey和SecreKey是私密的. 我们将其放在qiniu-key.json文件中. 听过读取文件来获取授权凭证. 同时在.gitignore中添加qiniu-key.json防止其上传到github.

var config = fs.readFileSync('./qiniu-key.json')
    config = JSON.parse(config)
    var {accessKey ,secretKey} = config;

    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    var options = {
          scope: "163-music",//163-music就是前面说的bucket
    };

    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken=putPolicy.uploadToken(mac);

注意163-music就是前面说的bucket. options是一个配置对象.

创建脚本

上传的按钮是有要求的. admin.html中上传的按钮如下:

 <div id="uploadContainer" class="draggable">
    <div id="uploadButton" class="clickable">
        <p>点击或拖曳上传</p>
        <p>文件大小不超过100MB</p>
    </div>
</div>

在admin.html中引入qiniu.min.js.
在admin.html中引入plupload.min.js
在admin.html中引入如下代码.

var uploader = Qiniu.uploader({
   runtimes: 'html5,flash,html4',      // 上传模式，依次退化
   browse_button: this.view.find('#uploadButton'),         // 上传选择的点选按钮，必需
   uptoken_url: 'http://localhost:8888/uptoken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
   get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
   domain: 'http://qiniu-plupload.qiniudn.com/',     // bucket域名，下载资源时用到，必需
   container: this.view.find('#uploadContainer'),             // 上传区域DOM ID，默认是browser_button的父元素
   max_file_size: '100mb',             // 最大文件体积限制
   flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash，相对路径
   max_retries: 3,                     // 上传失败最大重试次数
   dragdrop: true,                     // 开启可拖曳上传
   drop_element: this.view.find('#uploadContainer'),          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
   chunk_size: '20mb',                  // 分块上传时，每块的体积
   auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传

   init: {
       'UploadProgress': function(up, file) {
               // 每个文件上传时，处理相关的事情
           uploadStatus.textContent='文件上传中'
       },
       'FileUploaded': function(up, file, info) {
           var domain = up.getOption('domain');
           var response = JSON.parse(info.response);
           var sourceLink = '//' + domain +"/"+ encodeURIComponent(response.key); //获取上传成功后的文件的Url
           console.log({
               link: sourceLink,
               key: response.key
           })
           uploadStatus.textContent=sourceLink
       },

   }
 });

我们可以将这段代码放入js/upload-song.js中, 再在admin.html中引入它

<script src="./js/upload-song.js"></script>

现在的代码结构:

server.js
qiniu-key.json
src
    js
        upload-song.js
    admin.html

使用

分别在两个bash中执行下面的两个命令:

node server.js 8888

http-server -c-1

然后用浏览器通过http-server提供的网址, 打开admin.html文件.
我们发现有个按钮, 点击这个按钮, 选择要上传的文件. 上传成功后, 会打印出歌曲的链接和歌名
上传之后, 在七牛项目的内容管理中可以看到上传的文件.

参考:
https://developer.qiniu.com/kodo/sdk/4244/the-javascript-sdk-historical-documents-1-x
https://developer.qiniu.com/kodo/sdk/1289/nodejs#upload-token