创建项目
注册七牛账号, 进入开发者中心. 点击对象存储.
然后创建项目.
安装七牛的包. 由于七牛的包还依赖一个叫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