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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plupload使用指南</title>
<!-- 七牛云存储文件 -->
<script src="http://cdn.staticfile.org/Plupload/2.1.1/plupload.full.min.js"></script>
<script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>
</head>
<body>
<!-- 这里我们只使用最基本的html结构：一个选择文件的按钮，一个开始上传文件的按钮(甚至该按钮也可以不要) -->
<p id="container">
<button id="browse">选择文件</button>
<button id="start_upload">开始上传</button>
</p>
<div id="info">
<p>上传进度@{{ loaded }}</p>
<div v-bind:style="{ color: 'black', width: percent + 'px' ,height : '10px'}"></div>
</div>
<script>
var data = {
percent : 0,
speed : 0,
loaded : 0,
lastTime : '--:--'
};
var vm = new Vue({
el : '#info',
data : data
});
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上传模式,依次退化
browse_button: 'browse', // 上传选择的点选按钮，**必需**
// 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置
// 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func
// 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
uptoken : '{{ $token }}', // uptoken 是上传凭证，由其他程序生成
// uptoken_url: '/uptoken', // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
// uptoken_func: function(file){ // 在需要获取 uptoken 时，该方法会被调用
// // do something
// return uptoken;
// },
get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的 uptoken
// downtoken_url: '/downtoken',
// Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
unique_names: true, // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
// save_key: true, // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
domain: 'og3uiutra.bkt.clouddn.com', // bucket 域名，下载资源时用到，**必需**
container: 'container', // 上传区域 DOM ID，默认是 browser_button 的父元素，
max_file_size: '200mb', // 最大文件体积限制
flash_swf_url: 'http://cdn.staticfile.org/Plupload/2.1.1/Moxie.swf', //引入 flash,相对路径
max_retries: 3, // 上传失败最大重试次数
dragdrop: true, // 开启可拖曳上传
drop_element: 'container', // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
chunk_size: '4mb', // 分块上传时，每块的体积
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
//x_vars : {
// 自定义变量，参考http://developer.qiniu.com/docs/v6/api/overview/up/response/vars.html
// 'time' : function(up,file) {
// var time = (new Date()).getTime();
// do something with 'time'
// return time;
// },
// 'size' : function(up,file) {
// var size = file.size;
// do something with 'size'
// return size;
// }
//},
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
console.log(file);
// 文件添加进队列后,处理相关的事情
});
},
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
},
'UploadProgress': function(up, file) {
console.log(file);
console.log(file.percent);
vm.percent = file.percent;
vm.spead = file.spead;
vm.loaded = file.loaded;
// 每个文件上传时,处理相关的事情
},
'FileUploaded': function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
// 其中 info 是文件上传成功后，服务端返回的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);
// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
alert('success')
},
'Error': function(up, err, errTip) {
console.log(errTip);
//上传出错时,处理相关的事情
},
'UploadComplete': function() {
//队列文件处理完毕后,处理相关的事情
},
'Key': function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
var key = "";
// do something with key here
return key
}
}
});
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
// uploader 为一个 plupload 对象，继承了所有 plupload 的方法，参考http://plupload.com/docs
</script>
</body>
</html>
|