騰訊雲對象存儲COS的JS上傳封裝

官網：https://cloud.tencent.com/document/product/436/11459

參考：https://blog.csdn.net/qq_40146880/article/details/102829629

一、下載SDK並引入

　　地址：https://cos-sdk-archive-1253960454.file.myqcloud.com/cos-js-sdk-v5/latest/cos-js-sdk-v5.zip?_ga=1.114550148.286138921.1586252253

　　（可前往上面官網下載）

<script src="./sdk/cos-js-sdk-v5.min.js"></script>

 

二、封裝上傳，cos.js

export default new (class { constructor() {} _cos(obj) { return new COS({ getAuthorization: function(options, callback) { callback({ TmpSecretId: obj.credentials.tmpSecretId, TmpSecretKey: obj.credentials.tmpSecretKey, XCosSecurityToken: obj.credentials.sessionToken, StartTime: obj.startTime, // 時間戳，單位秒，如：1580000000
                    ExpiredTime: obj.expiredTime, // 時間戳，單位秒，如：1580000000,SDK 在 ExpiredTime 時間前，不會再次調用 getAuthorization
 }); } }); } /** * 文件直傳 * @param {Object} obj Bucket、Region...，接口返回 * @returns err || data */ putObject(obj,file,callback) { return new Promise((resolve, reject) => { this._cos(obj).putObject( { Bucket: obj.bucket, /* 必須 */ Region: obj.region, /* 存儲桶所在地域，必須字段 */ Key: obj.prefix + `${this.randomSign(3)}.${file.name.split('.')[1]}`,      /* 必須 */ Body: file, // 上傳文件對象
 }, (err, data) => { callback(err,data) } ); }); } /** * 文件分塊上傳 * @param {Object} obj Bucket、Region...，接口返回 * @returns err || data */ sliceUploadFile(obj,file,callback) { return new Promise((resolve, reject) => { this._cos(obj).sliceUploadFile( { Bucket: obj.bucket, Region: obj.region, Key: obj.prefix + `${this.randomSign(3)}.${file.name.split('.')[1]}`, Body: file, onTaskReady: function(taskId) { /* 執行隊列taskId */ console.log('taskId:', taskId); }, onProgress: progressData => { /* 非必須 */
                        var percent = parseInt(progressData.percent * 10000) / 100; var speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100; console.log('進度：' + percent + '%; 速度：' + speed + 'Mb/s;'); this.loading('進度：' + parseInt(percent) + '%'); } }, (err, data) => { callback(err,data) } ); }); } randomSign(len) { return `${this.random_string(len)}-${parseInt(Math.floor(Math.random() * Date.now()) / 1000)}`; } random_string(len) { //獲取隨機名
        len = len || 32; let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; let maxPos = chars.length; let pwd = ''; for (let i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } loading(text) { try { console.log(text); } catch (error) { console.log(error); } } })();

 

三、使用

<!--vue-->
<input @change="handleChange" accept="image/*" type="file" name="" id="" />

import cos from '@/utils/cos'

// 請求數據
$.get('http://xxxxxxx', null, function (res) { // res:{
    // code: 1,
    // data: {
    // bucket: "dev....51007710",
    // credentials: 
    // {
    // sessionToken: "GXpM....7N5Asg",
    // tmpSecretId: "AKIDF....jB3mQ2",
    // tmpSecretKey: "pnof....9qew8="
    // },
    // domain: "dev....myqcloud.com",
    // expiration: "2020-12-24T06:46:10Z",
    // expiredTime: 1608792370,
    // prefix: "post/..../u/1/",
    // region: "ap-chengdu",
    // requestId: "cbc6....e080",
    // startTime: 1608788770
    // },
    // msg: ""
    // }
    if (res.code == 1 && res.data) { cos._cos(res.data) } else{ // error
 } });

// 上傳
handleChange(e) { // 這里的this.tx_data為上一步請求接口拿到的數據
    var _this = this
    if(this.tx_data){ cos.putObject(this.tx_data,e.target.files[0],(error,data)=>{ if(error){ this.$message.error('上傳失敗') }else{ this.$message.success('上傳成功') let url = 'https://'+ data.Location // ...
 } }) }else{ // error
 } }