123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <!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>
|