<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传限制 Content-Type</title>
<style>
h1, h2 {
font-weight: normal;
}
#msg {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>上传限制 Content-Type</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>
(function () {
// 计算签名
var getUploadSign = function (options, callback) {
var url = '/uploadSign?filename=' + encodeURIComponent(options.filename) + '&_=' + Date.now();
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function (e) {
var token;
try {
token = (new Function('return ' + xhr.responseText))();
} catch (e) {}
if (token) {
callback(null, token);
} else {
console.error(xhr.responseText);
callback('获取签名出错');
}
};
xhr.onerror = function (e) {
callback('获取签名出错');
};
xhr.send();
};
// 上传文件
var uploadFile = function (file, callback) {
getUploadSign({ filename: file.name }, function (err, info) {
if (err) {
alert(err);
return;
}
var signMap = info.signMap;
var mimeLimit = info.mimeLimit;
var allowActions = ['ListMultipartUploads', 'ListParts', 'InitiateMultipartUpload', 'UploadPart', 'CompleteMultipartUpload', 'PutObject'];
var cos = new COS({
getAuthorization: function (opt, cb) {
var action = opt.Scope[0].action.split(':')[1];
if (allowActions.indexOf(action) === -1) return console.error('action not allow');
var auth = signMap[action];
cb({ Authorization: auth });
},
});
cos.uploadFile({
Bucket: info.bucket,
Region: info.region,
Key: info.key,
Body: file,
SliceSize: 1024 * 1024 * 8,
ChunkSize: 1024 * 1024 * 8,
Headers: {
'x-cos-mime-limit': mimeLimit,
},
}, function (err, data) {
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.code + '(' + err.message + ')' : ('上传成功，ETag=' + data.ETag);
});
};
})();
</script>
</body>
</html>