vue使用腾讯cos临时密钥上传图片

vue使用腾讯cos临时密钥上传图片

cos官方文档

使用npm安装cos的sdk

npm i cos-js-sdk-v5 --save

在组件内引入sdk

// 引入cos sdk
import COS from 'cos-js-sdk-v5'

创建cos对象

// 创建cos对象
const cos = new COS({
    getAuthorization: function (options, callback) {
    // 异步获取临时密钥
    // 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
    // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
    // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
    var url = ''; // url替换成您自己的后端服务
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        try {
            var data = JSON.parse(e.target.responseText);
            var credentials = data.data;
        } catch (e) {
        }
        if (!data || !credentials) {
          return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
        };
        callback({
          TmpSecretId: credentials.tmpSecretId,
          TmpSecretKey: credentials.tmpSecretKey,
          SecurityToken: credentials.sessionToken,
          // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
          StartTime:credentials.StartTime , // 开始时间戳，单位秒，如：1580000000
          ExpiredTime:credentials.ExpiredTime, // 结束时间戳，单位秒，如：1580000000
        });
    };
    xhr.send();
    }
});

异步获取cos临时密钥上传文件

// 导出上传方法
export function uploadFile(file,keys) {
    const key = 'uploadImg/'+keys ; // Key: 对象键（Object 的名称），对象在存储桶中的唯一标识
    let res = Promise
    .all([cos]) //获取临时密钥
    .then((res) => {
      return new Promise((resolve,reject) => {
        cos.putObject({
          Bucket: '', /* 后端返回的桶名称 */
          Region: '',    /* 桶的对应地区 */
          Key: key,              /* 文件名，也是文件在桶里唯一的标识 */
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: function (progressData) {
            // console.log(JSON.stringify(progressData));
          }
        }, function (err, data) {//回调函数
          if (!err) {
              //成功返回data对象
            resolve(data);
          } else {
              //失败返回error信息
            reject(err);
          }
        });
      })
    })
    return res
}

在vue文件method内的方法中调用封装的cos方法

记得用import引入封装好的cos方法，或者在main.js上挂载cos方法再调用

uploadFile(file,randText).then((e)=>{
    if(e.statusCode == 200) {
        this.msgSuccess(file.name+'上传成功')
    }
}).catch((e)=>{
    this.msgError(file.name+'上传失败')
})

ps：好像有数不尽的对象，又确实没有对象