这次我们做一个仿手机端网易云音乐
在写代码之前先做好准备工作，需求分析等
首先我们来画图
接下来搭建 LeanCloud 环境
- 创建一个新应用 wy-music
- 在 帮助-快速入门 中按照教程安装 SDK
- 然后验证-测试代码
- 添加 Song 和 Playlist 两个 Class
SDK 是什么
软件开发工具包（Software Development Kit, SDK）一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、作业系统等建立应用软件的开发工具的集合。
SDK 与 API 的区别
创建七牛帐号并上传一个mp3成功
注意七牛的版本使用的是 1.0.22,
npm安装的是 2.x，安装后在 package.json中修改后 npm i
代码
方案一：
- 注册七牛帐号（上传身份证）
- 创建一个篮子（bucket）
- 往篮子里上传 mp3 文件
- 获取 mp3 文件的外链
方案二：
- 注册七牛帐号（上传身份证）
- 创建一个篮子（bucket）
- 创建一个 nodejs server
- 进入七牛 SDK 官网，选择 Node.js
- npm init -y
- npm install qiniu
- 添加 /uptoken 路由
- 在 /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
- 管理员页面admin.html,参考七牛的示例，使用 Qiniu.uploader 来上传文件
- 引入 moxie 1.x
- 引入 plupload 2.x
- 引入 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>
```
- 初始化上传按钮
```
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
