<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鑷畾涔夌殑鍒嗙墖涓婁紶</title>
<style>
h1, h2 {
font-weight: normal;
}
#msg {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>鑷畾涔夌殑鍒嗙墖涓婁紶</h1>
<input id="fileSelector" type="file">
<input id="submitBtn" type="submit">
<div id="msg"></div>
<script src="../dist/cos-js-sdk-v5.js"></script>
<script src="./common/async.js"></script>
<script>
(function () {
// 璇锋眰鐢ㄥ埌鐨勫弬鏁�
var Bucket = 'test-1250000000';
var Region = 'ap-guangzhou';
var ChunkSize = 1024 * 1024 * 8;
// 鍒濆鍖� SDK
var cos = new COS({
getAuthorization: function (options, callback) {
var url = '/sts'; // 濡傛灉鏄� npm run sts.js 璧风殑 nodejs server锛屼娇鐢ㄨ繖涓�
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText);
var credentials = data.credentials;
} catch (e) {
}
if (!data || !credentials) return console.error('credentials invalid');
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: data.startTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000000锛屽缓璁繑鍥炴湇鍔″櫒鏃堕棿浣滀负绛惧悕鐨勫紑濮嬫椂闂达紝閬垮厤鐢ㄦ埛娴忚鍣ㄦ湰鍦版椂闂村亸宸繃澶у鑷寸鍚嶉敊璇�
ExpiredTime: data.expiredTime, // 鏃堕棿鎴筹紝鍗曚綅绉掞紝濡傦細1580000900
});
};
xhr.send();
},
});
// 涓婁紶鏂囦欢
var uploadFile = function (file, callback) {
var fileSize = file.size;
var Key = 'dir/' + file.name; // 杩欓噷鎸囧畾涓婁紶鐩綍鍜屾枃浠跺悕
// 鍒涘缓 UploadId
cos.multipartInit({
Bucket: Bucket,
Region: Region,
Key: Key,
}, function (err, data) {
if (err) return console.error('UploadId 鍒涘缓鍑洪敊锛�', err);
var UploadId = data.UploadId;
console.log('UploadId 宸插垱寤猴細', UploadId);
var Parts = new Array(Math.ceil(fileSize / ChunkSize)).fill(0).map(function (item, index) {
return {PartNumber: index + 1};
});
Async.eachLimit(Parts, 3, function (partItem, nextPart) {
var PartNumber = partItem.PartNumber;
var start = (PartNumber - 1) * ChunkSize;
var end = Math.min(start + ChunkSize);
var blob = file.slice(start, end);
// 涓婁紶姣忎釜鍒嗙墖
cos.multipartUpload({
Bucket: Bucket,
Region: Region,
Key: Key,
UploadId: UploadId,
PartNumber: PartNumber,
Body: blob,
}, function (err, data) {
if (err) return nextPart(err);
if (!data.headers.etag) return nextPart('娴忚鍣ㄨ幏鍙栦笉鍒� ETag Header锛岄渶瑕佸瓨鍌ㄦ《閰嶇疆 CORS ExposeHeaders 鍏佽褰撳墠鍩熷悕璺ㄥ煙璇诲彇 ETag 瀛楁銆�');
partItem.ETag = data.headers.etag || '';
console.log('鍒嗙墖涓婁紶瀹屾垚锛�', partItem.PartNumber, partItem.ETag);
nextPart();
});
}, function (err) {
if (err) return console.error('涓婁紶鍒嗙墖鍑洪敊锛�', err);
// 瀹屾垚鍒嗙墖涓婁紶
cos.multipartComplete({
Bucket: Bucket,
Region: Region,
Key: Key,
UploadId: UploadId,
Parts: Parts,
}, function (err, data) {
if (err) return console.error('鏂囦欢瀹屾垚鍑洪敊锛�', err);
console.log('鏂囦欢涓婁紶鎴愬姛锛�', data.Location);
callback(err, data);
});
});
});
};
// 鐩戝惉琛ㄥ崟鎻愪氦
document.getElementById('submitBtn').onclick = function (e) {
var file = document.getElementById('fileSelector').files[0];
if (!file) {
document.getElementById('msg').innerText = '鏈€夋嫨涓婁紶鏂囦欢';
return;
}
file && uploadFile(file, function (err, data) {
console.log(err || data);
document.getElementById('msg').innerText = err ? err : ('涓婁紶鎴愬姛锛孍Tag=' + data.ETag);
});
};
})();
</script>
</body>
</html>