首先下載七牛雲的JavaScript-SDK
|
1
|
npm install qiniu
-
js
|
下載完成JavaScript-SDK以后就可以上傳圖片信息了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<template>
<div>
<
input
type="file" name='upFile' id="upFile" @change='changeFile($event)'>
<
input
type="button" name="開始上傳" value="開始上傳" @click='uploadFile()'>
<img v
-
if
=
"coverUrl"
:src="coverUrl" alt="封面">
<el
-
progress :percentage
=
"filePercent"
><
/
el
-
progress>
{{filePercent}}
<
/
div>
<
/
template>
<script>
import
* as qiniu from "qiniu-js";
export default {
name:
'qiniu'
,
data() {
return
{
file
:null,
videoUrl:null,
coverUrl:null,
filePercent:
0
};
},
methods: {
changeFile(e){
/
/
獲取文件
this.
file
= e.target.files[0];
},
uploadFile() {
/
/
當前VUE中的this 是指向實例，相當於父級，指向指不到子級中。所需需要一個變量 _this 存儲this得指向。
let _this
=
this
/
/
獲取身份的token
let token
=
'6iHLwjADA4xPDG9Wl5FdJFkdU_mcaE5YrgDyoFHa:xT_22Uqm24-ZLGRFvk74Z7F-Xrw=:eyJzY29wZSI6ImppeXVuZWR1IiwiZGVhZGxpbmUiOjE2MDMzNTI0OTh9'
/
/
上傳時的配置
var config
=
{
useCdnDomain: true
};
/
/
設置文件的配置
var putExtra
=
{
fname: "",
params: {},
mimeType: null
};
/
/
實例化七牛雲的上傳實例
var observable
=
qiniu.upload(_this.file, null, token, putExtra, config);
/
/
設置實例的監聽對象
var observer
=
{
/
/
接收上傳進度信息
next
(res) {
/
/
上傳進度
_this.filePercent
=
parseInt(res.total.percent)
if
(_this.filePercent
=
=
100
){
console.log(
"success"
)
}
},
/
/
接收上傳錯誤信息
error(err) {
console.log(err)
},
/
/
接收上傳完成后的信息
complete(res) {
console.log(res.key)
}
};
/
/
上傳開始
var subscription
=
observable.subscribe(observer);
}
}
};
<
/
script>
|