js生成token 七牛云_七牛云，js前端获取token上传思路demo

选择文件

js代码

​

// $.ajax({url:"/api/uptoken",success: (res)=> initFileInput(res)})

console.log(qiniu)

// let token = res.uptoken;

let token = '9OTcMoaFLersH7Gia307ekIlG1t5aFXpbk5VDk94:hMXHQ0brKY6werchb7qsmP_TrnM=:eyJzY29wZSI6InBoeWF1ZGl0IiwiZGVhZGxpbmUiOjE1ODg3MzU5ODh9'

// z1华北 z2 华南

let config = {

useCdnDomain: true,

region: qiniu.region.z1

};

let putExtra = {

fname: "",

params: {},

mimeType: null

};

$("#select").change(function(){

console.log(1111111111)

let file = this.files[0];

let key = file.name;

let subscription;

// 调用sdk上传接口获得相应的observable，控制上传和暂停

let observable = qiniu.upload(file, key, token, putExtra, config);

let observer ={

next(result){ //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)

let total = result.total;

$(".speed").text("进度：" + total.percent + "% ");//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]

},

error(err){ //失败后

alert(err.message);

},

complete(res){

console.log(res) //成功后

// ?imageView2/2/h/100：展示缩略图，不加显示原图

// ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高

}

}

// 取消上传

// subscription.unsubscribe();

observable.subscribe(observer)

})

​

css代码

body {

background-color: rgb(249, 249, 249);

}

.navbar {

background-color: #fff;

}

.mainContainer {

position: relative;

top: 52px;

}

.mainContainer {

width: 1170px;

margin: 0 auto;

padding: 15px 15px;

}

.mainContainer .row .tip li {

list-style: none;

}

.mainContainer .nav-box ul li a {

color: #777;

}

#box,

#box2 {

margin-top: 20px;

height: 46px;

}

.fragment-group {

overflow: hidden;

padding-left: 0;

}

.hide {

visibility: hidden;

}

.fragment-group .fragment {

float: left;

width: 30%;

padding-right: 10px;

list-style: none;

margin-top: 10px;

}

.file-input {

display: inline-block;

box-sizing: border-box;

width: 130px;

height: 46px;

opacity: 0;

cursor: pointer;

}

.mainContainer .select-button {

position: absolute;

background-color: #00b7ee;

color: #fff;

font-size: 18px;

padding: 0 30px;

line-height: 44px;

font-weight: 100;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}

.speed {

margin-top: 15px;

}