首先使用npm安裝
npm install qiniu-js
引入
import * as qiniu from 'qiniu-js'
let subscription=‘’
直接上代碼
Preview(event){
let that=this
let file = event.target.files[0];
let observable
if (file.size > 1024 * 1024 * 200) {
that.sizeTopic=true
setTimeout(function(){
that.sizeTopic=false
},1000)
return false;
}
let name=event.target.files[0].name
this.resources_name=name
this.sendSuccess=true
this.$http.get(process.env.API_ROOT+'api/sqiniu/uptoken?name='+name)
.then((res) =>{
let token = res.data.data.uptoken; //上傳驗證信息，前端通過接口請求后端獲得
//七牛API
let config = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 5,
region: qiniu.region.z2
};
let putExtra = {
fname: "",
params: {},
mimeType: null
};
let key = file.name;
// 添加上傳dom面板
let next = (response) =>{
let total = response.total; //上傳進度提示
that.percent=parseInt(total.percent)
}
let complete= (res) =>{
that.resources_key=res.key,
that.resources_hash=res.hash,
that.resources_size=res.fsize,
that.resources_type=res.type
that.sendTopic=true
setTimeout(function(){
that.sendTopic=false
},1000)
}
//七牛雲上傳對象
let subObject={
next: next,
complete: complete,
error: error
}
// let subscription;
let error= (err) =>{
that.failTopic=true
setTimeout(function(){
that.failTopic=false
},1000)
}
// 調用sdk上傳接口獲得相應的observable，控制上傳和暫停
observable = qiniu.upload(file, key, token, putExtra, config);
this.subscription=observable.subscribe(subObject)
})
.catch(function (error) {
console.log(error);
});
},
this.subscription.unsubscribe()//取消上傳方法