- 注冊(cè)七牛帳號(hào)(上傳身份證)
- 創(chuàng)建一個(gè)籃子(bucket)
-
- 創(chuàng)建一個(gè) nodejs server
- 進(jìn)入七牛 SDK 官網(wǎng)扼劈,選擇 Node.js
- npm init -y
- npm install qiniu
- 添加 /uptoken 路由轿秧,新建qiniu-key.json里面寫(xiě)入密匙
{"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: '籃子名稱(chēng)', //你的籃子名稱(chēng)
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);
response.write(`
{
"uptoken": "${uploadToken}"
}
`)
response.end()
}else{
- 將 uploadToken 作為響應(yīng)輸出
- node server.js 8888嘿悬,啟動(dòng) server
- 參考七牛的示例,使用(1.0.24版本) Qiniu.uploader 來(lái)上傳文件
4. 初始化上傳按鈕
```
var uploader = Qiniu.uploader({
runtimes: 'html5', //上傳模式,依次退化
browse_button: 'xxx', //上傳選擇的點(diǎn)選按鈕脚祟,**必需**
uptoken_url : 'http://localhost:8888/uptoken',
domain: 'http://qiniu-plupload.qiniudn.com/', //bucket 域名绍在,下載資源時(shí)用到,**必需**
get_new_uptoken: false, //設(shè)置上傳文件的時(shí)候是否每次都重新獲取新的token
max_file_size: '40mb', //最大文件體積限制
dragdrop: true, //開(kāi)啟可拖曳上傳
drop_element: 'yyy', //拖曳上傳區(qū)域元素的ID斗锭,拖曳文件或文件夾后可觸發(fā)上傳
auto_start: true, //選擇文件后自動(dòng)上傳地淀,若關(guān)閉需要自己綁定事件觸發(fā)上傳
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加進(jìn)隊(duì)列后,處理相關(guān)的事情
});
},
'BeforeUpload': function(up, file) {
// 每個(gè)文件上傳前,處理相關(guān)的事情
},
'UploadProgress': function(up, file) {
// 每個(gè)文件上傳時(shí),處理相關(guān)的事情
uploadStatus.textContent = '上傳中'
},
'FileUploaded': function(up, file, info) {
uploadStatus.textContent = '上傳完畢'
// 每個(gè)文件上傳成功后,處理相關(guān)的事情
// 其中 info.response 是文件上傳成功后,服務(wù)端返回的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) {
//上傳出錯(cuò)時(shí),處理相關(guān)的事情
},
'UploadComplete': function() {
//隊(duì)列文件處理完畢后,處理相關(guān)的事情
},
}
});
```