- 注册七牛帐号(上传身份证)
- 创建一个篮子(bucket)
-
- 创建一个 nodejs server
- 进入七牛 SDK 官网,选择 Node.js
- npm init -y
- npm install qiniu
- 添加 /uptoken 路由,新建qiniu-key.json里面写入密匙
{"accessKey" : "", "secretKey": "" }
-
- 在server.js 中添加代码
if(path==='/uptoken'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin', '*')
response.removeHeader('Date')
var config = fs.readFileSync('./qiniu-key.json')
config = JSON.parse(config)
let {accessKey, secretKey} = config;
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: '篮子名称', //你的篮子名称
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);
response.write(`
{
"uptoken": "${uploadToken}"
}
`)
response.end()
}else{
- 将 uploadToken 作为响应输出
- node server.js 8888,启动 server
- 参考七牛的示例,使用(1.0.24版本) Qiniu.uploader 来上传文件
4. 初始化上传按钮
```
var uploader = Qiniu.uploader({
runtimes: 'html5', //上传模式,依次退化
browse_button: 'xxx', //上传选择的点选按钮,**必需**
uptoken_url : 'http://localhost:8888/uptoken',
domain: 'http://qiniu-plupload.qiniudn.com/', //bucket 域名,下载资源时用到,**必需**
get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
max_file_size: '40mb', //最大文件体积限制
dragdrop: true, //开启可拖曳上传
drop_element: 'yyy', //拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
auto_start: true, //选择文件后自动上传,若关闭需要自己绑定事件触发上传
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
});
},
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
},
'UploadProgress': function(up, file) {
// 每个文件上传时,处理相关的事情
uploadStatus.textContent = '上传中'
},
'FileUploaded': function(up, file, info) {
uploadStatus.textContent = '上传完毕'
// 每个文件上传成功后,处理相关的事情
// 其中 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() {
//队列文件处理完毕后,处理相关的事情
},
}
});
```