这次我们做一个仿手机端网易云音乐

在写代码之前先做好准备工作，需求分析等
首先我们来画图

• 用例图
  • 
• 线框图（草图）
  • 
• 框架图
  • 

接下来搭建 LeanCloud 环境

1. 创建一个新应用 wy-music
2. 在 帮助-快速入门 中按照教程安装 SDK
3. 然后验证-测试代码
4. 添加 Song 和 Playlist 两个 Class

SDK 是什么

软件开发工具包（Software Development Kit, SDK）一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、作业系统等建立应用软件的开发工具的集合。
SDK 与 API 的区别

创建七牛帐号并上传一个mp3成功

注意七牛的版本使用的是 1.0.22,
npm安装的是 2.x，安装后在 package.json中修改后 npm i
代码
方案一：

1. 注册七牛帐号（上传身份证）
2. 创建一个篮子（bucket）
3. 往篮子里上传 mp3 文件
4. 获取 mp3 文件的外链

方案二：

1. 注册七牛帐号（上传身份证）
2. 创建一个篮子（bucket）
3. 创建一个 nodejs server
4. 进入七牛 SDK 官网，选择 Node.js
5. npm init -y
6. npm install qiniu
7. 添加 /uptoken 路由
8. 在 /uptoken 中添加代码

  ```
  if (path === '/uptoken') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    // set CORS
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 获取 key，本地文件不上传
    var key = fs.readFileSync('./qiniu-key.json')
    key = JSON.parse(key)
    // 创建各种上传凭证之前，我们需要定义好其中鉴权对象mac
    let { accessKey, secretKey } = key
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    // 简单上传
    var options = {
      scope: "wy-music", // 篮子(bucket)名称
    };
    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken = putPolicy.uploadToken(mac);
    // 返回 uoloadToken,admin.html设置访问获取
    response.write(`
    {
      "uptoken": "${uploadToken}"
    }
    `)
    response.end()
  }
  ```
6. 将 uploadToken 作为响应输出
7. node server.js 8888，启动 server

4. 管理员页面admin.html,参考七牛的示例，使用 Qiniu.uploader 来上传文件
5. 引入 moxie 1.x
6. 引入 plupload 2.x
7. 引入 qiniu-js 1.x

  ```
  <script src="../venders/moxie.min.js"></script>
  <script src="../venders/plupload.min.js"></script>
  <script src="../node_modules/qiniu-js/dist/qiniu.min.js"></script>
  ```

5. 初始化上传按钮

```
var uploader = Qiniu.uploader({
  disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送
  runtimes: 'html5', // 上传模式,依次退化
  browse_button: 'uploadBtn', // 上传选择的点选按钮，**必需**
  uptoken_url: 'http://localhost:8888/uptoken', 
  get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的 uptoken
  domain: 'https://p6az32xea.bkt.clouddn.com', // bucket 域名，下载资源时用到，如：'http:// xxx.bkt.clouddn.com/' **必需**
   max_file_size: '40mb', // 最大文件体积限制
   flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
   max_retries: 3, // 上传失败最大重试次数
   dragdrop: true, // 开启可拖曳上传
   drop_element: 'uploadContainer', // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
   chunk_size: '4mb', // 分块上传时，每块的体积
   auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
   init: {
     'FilesAdded': function(up, files) {
       plupload.each(files, function(file) {
         // 文件添加进队列后,处理相关的事情
       });
     },
     'BeforeUpload': function(up, file) {
       // 每个文件上传前,处理相关的事情
     },
     'UploadProgress': function(up, file) {
       // 每个文件上传时,处理相关的事情
       uploadStatus.innerText = '上传中……'
     },
     'FileUploaded': function(up, file, info) {
       // 每个文件上传成功后,处理相关的事情
       uploadStatus.innerText = '上传完毕'
       // 其中 info.response 是文件上传成功后，服务端返回的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.response);
       // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
     },
     'Error': function(up, err, errTip) {
       //上传出错时,处理相关的事情
     },
     'UploadComplete': function() {
       //队列文件处理完毕后,处理相关的事情
     }
   }
 });
```

本文所使用的依赖：
moxie 版本号：1.5.6
plupload 版本号：2.3.6