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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿里云 JavaScript上传SDK Demo (使用jquery) STSToken 上传方式 </title>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js"></script>
<script src="/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.13.0.min.js"></script>
<!-- <script type="text/javascript" src="./lib/aliyun-upload-sdk.js"></script> -->
<style type="text/css">
.container {
width: 1200px;
margin: 0 auto;
}
.input-control {
margin: 5px 0;
}
.input-control label {
font-size: 14px;
color: #333;
width: 30%;
text-align: right;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.input-control input {
width: 30%;
height: 30px;
padding: 0 5px;
}
.upload {
padding: 30px 50px;
}
.progress {
font-size: 14px;
}
.progress i {
font-style: normal;
}
.upload-type {
color: #666;
font-size: 12px;
padding: 10px 0;
}
.upload-type button {
margin: 0 10px 0 20px;
}
.status {
font-size: 14px;
margin-left: 30px;
}
.info {
font-size: 14px;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="setting">
<div class="input-control">
<label for="timeout">请求过期时间（配置项 timeout, 默认 60000）:</label>
<input type="text" id="timeout" placeholder="输入过期时间, 单位毫秒">
</div>
<div class="input-control">
<label for="partSize">分片大小（配置项 partSize, 默认 1048576）:</label>
<input type="text" class="form-control" id="partSize" placeholder="输入分片大小, 单位bit, 最小100k">
</div>
<div class="input-control">
<label for="parallel">上传分片数（配置项 parallel, 默认 5）:</label>
<input type="text" class="form-control" id="parallel" placeholder="输入并行上传分片个数, 默认为5">
</div>
<div class="input-control">
<label for="retryCount">网络失败重试次数（配置项 retryCount, 默认 3）:</label>
<input type="text" class="form-control" id="retryCount" placeholder="输入网络失败重试次数, 默认为3">
</div>
<div class="input-control">
<label for="retryDuration">网络失败重试间隔（配置项 retryDuration, 默认 2）:</label>
<input type="text" class="form-control" id="retryDuration" placeholder="输入网络失败重试间隔, 默认2秒">
</div>
<div class="input-control">
<label for="region">配置项 region, 默认 cn-shanghai:</label>
<select id="region">
<option>cn-shanghai</option>
<option>eu-central-1</option>
<option>ap-southeast-1</option>
</select>
</div>
<div class="input-control">
<label for="userId">阿里云账号ID:</label>
<input type="text" value="1303984639806000" disabled class="form-control" id="userId"
placeholder="输入阿里云账号ID">
userId必填，只需要有值即可
</div>
</div>
<div class="upload">
<div>
<input type="file" id="fileUpload">
<label class="status">上传状态: <span id="status"></span></label>
</div>
<div class="upload-type">
上传方式二, 使用 STSToken 上传:
<button id="stsUpload" disabled="false">开始上传</button>
<button id="pauseUpload">暂停</button>
<button id="resumeUpload" disabled="false">恢复上传</button>
<span class="progress">上传进度: <i id="sts-progress">0</i> %</span>
</div>
</div>
<div class="info">点播STS参数如何获取，请查阅<a href="https://help.aliyun.com/document_detail/57114.html" target="_blakn">
获取STS</a></div>
</div>
<script>
//兼容IE11
if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (fileData) {
var binary = "";
var pt = this;
var reader = new FileReader();
reader.onload = function (e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
//pt.result - readonly so assign binary
pt.content = binary;
pt.onload()
}
reader.readAsArrayBuffer(fileData);
}
}
$(document).ready(function () {
/**
* 创建一个上传对象
* 使用 STSToken 上传方式
*/
function createUploader() {
var uploader = new AliyunUpload.Vod({
timeout: $('#timeout').val() || 60000,
partSize: $('#partSize').val() || 1048576,
parallel: $('#parallel').val() || 5,
retryCount: $('#retryCount').val() || 3,
retryDuration: $('#retryDuration').val() || 2,
region: $('#region').val(),
userId: $('#userId').val(),
// 添加文件成功
addFileSuccess: function (uploadInfo) {
$('#stsUpload').attr('disabled', false)
$('#resumeUpload').attr('disabled', false)
$('#status').text('添加文件成功, 等待上传...')
console.log("addFileSuccess: " + uploadInfo.file.name)
},
// 开始上传
onUploadstarted: function (uploadInfo) {
// 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 用户需要自己获取 accessKeyId, accessKeySecret,secretToken
// 下面的 URL 只是测试接口, 用于获取 测试的 accessKeyId, accessKeySecret,secretToken
console.log(uploadInfo)
var stsUrl = '/free/sts'
$.ajax({
url: stsUrl,
type: 'POST',
async: false,
success: function (e) {
console.log(e.data)
let accessKeyId = e.data.appid;
let accessKeySecret = e.data.secret;
// let
let secretToken = e.data.token;
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
}
})
// $.post(stsUrl, function (data) {
$('#status').text('文件开始上传...')
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log('upload End = ',uploadInfo)
let videoId = uploadInfo.videoId
console.log('要播放这个视频，你先要将 videoId 传给后端，然后授权播放 = ',videoId)
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
$('#status').text('文件上传成功!')
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
$('#status').text('文件上传失败!')
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
$('#status').text('文件已暂停上传!')
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
var progressPercent = Math.ceil(progress * 100)
$('#sts-progress').text(progressPercent)
$('#status').text('文件上传中...')
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
// 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
// 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
// 这里是测试接口, 所以我直接获取了 STSToken
$('#status').text('文件上传超时!')
var stsUrl = 'http://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateSecurityToken?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=67999yyuuuy&AppVersion=1.0.0'
$.get(stsUrl, function (data) {
var info = data.SecurityTokenInfo
var accessKeyId = info.AccessKeyId
var accessKeySecret = info.AccessKeySecret
var secretToken = info.SecurityToken
var expiration = info.Expiration
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expiration)
}, 'json')
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
$('#status').text('文件上传完毕!')
console.log("onUploadEnd: uploaded all the files")
}
})
return uploader
}
var uploader = null
$('#fileUpload').on('change', function (e) {
var file = e.target.files[0]
if (!file) {
alert("请先选择需要上传的文件!")
return
}
var Title = file.name
//这个是上传的文件信息
var userData = JSON.stringify(
{"Vod": {"Title": "这个是上传的文件名", "CateId": "1000355534"}}
)
if (uploader) {
uploader.stopUpload()
$('#sts-progress').text('0')
$('#status').text("")
}
uploader = createUploader()
// 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
// console.log(userData)
uploader.addFile(file, null, null, null, userData)
$('#stsUpload').attr('disabled', false)
$('#pauseUpload').attr('disabled', true)
$('#resumeUpload').attr('disabled', true)
})
$('#stsUpload').on('click', function () {
// 然后调用 startUpload 方法, 开始上传
if (uploader !== null) {
uploader.startUpload()
$('#stsUpload').attr('disabled', true)
$('#pauseUpload').attr('disabled', false)
}
})
$('#pauseUpload').on('click', function () {
if (uploader !== null) {
uploader.stopUpload()
$('#resumeUpload').attr('disabled', false)
$('#pauseUpload').attr('disabled', true)
}
})
$('#resumeUpload').on('click', function () {
if (uploader !== null) {
uploader.startUpload()
$('#resumeUpload').attr('disabled', true)
$('#pauseUpload').attr('disabled', false)
}
})
})
</script>
</body>
</html>
|
次阅读
