快速入门

import COS from 'cos-js-sdk-v5';
const cos = new COS({
    getAuthorization: async function (options, callback) {
      const data = await fetchSts('xxxx'); // 需自行实现获取临时密钥逻辑
      callback({
        TmpSecretId: data.credentials.tmpSecretId,
        TmpSecretKey: data.credentials.tmpSecretKey,
        SecurityToken: data.credentials.sessionToken,
        // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
        StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
        ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
        ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
      });
    }
});

import COS from 'cos-js-sdk-v5';
const cos = new COS({
    // 其他配置项可参考下方 初始化配置项
    // getAuthorization 必选参数
    getAuthorization: function (options, callback) {
        // 初始化时不会调用，只有调用 cos 方法（例如 cos.putObject）时才会进入
        // 异步获取临时密钥
        // 服务端 JS 示例：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
        const stsUrl = 'http://example.com/server/sts'; // stsUrl 替换成您自己的后端服务
        fetch(stsUrl)
          .then(response => response.json())
          .then(data => {
            if (!data || !data.credentials) {
              return console.error('credentials invalid:\\n' + JSON.stringify(data, null, 2))
            }
            // 检查credentials格式
            const { credentials } = data;
            console.log(credentials);
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              SecurityToken: credentials.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          })
          .catch(error => {
            console.error('获取临时密钥失败', error);
          });
    }
});
export default cos;

import cos from 'utils/cos';

let taskId;
// 上传文件，file为选择的文件
async function upload(file) {
  try {
    const data = await cos.uploadFile({
      Bucket: 'examplebucket-1250000000', // 填写自己的 bucket，必须字段
      Region: 'COS_REGION',     // 存储桶所在地域，必须字段
      Key: '1.jpg',            // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
      Body: file, // 上传文件对象
      SliceSize: 1024 * 1024 * 5,  // 触发分块上传的阈值，超过5MB 使用分块上传，小于5MB使用简单上传。可自行设置，非必须
      onProgress: function(progressData) {
        console.log('上传进度：', progressData);
      },
      onTaskReady: function(id) { // 非必须
        taskId = id;
      },
    });
    console.log('上传成功', data);
  } catch (e) {
    console.error('上传失败', e);
  }
}

// 监听上传队列
cos.on('update-list', data => {
    console.log(data);
});
// 暂停上传任务
cos.pauseTask(taskId);
// 重启上传任务
cos.restartTask(taskId);
// 取消上传任务
cos.cancelTask(taskId)

import COS from 'cos-js-sdk-v5';

// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
   SecretId: process.env.SecretId, // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
   SecretKey: process.env.SecretKey, // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
});

getAuthorization: function(options, callback) { ... }

<template>
  <div>
    <input type="file" @change="handleUpload" />
  </div>
</template>
<script>
// 直接引入cos-js-sdk-v5（npm 安装）
import COS from 'cos-js-sdk-v5';

export default {
  methods: {
    handleUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      // 直接在组件内初始化 COS 实例
      const cos = new COS({
        SecretId: '您的 SecretId',    // 替换实际 SecretId
        SecretKey: '您的 SecretKey'   // 替换实际 SecretKey
      });
      // 调用上传方法
      cos.uploadFile({
        Bucket: 'examplebucket-1250000000',
        Region: 'ap-guangzhou',
        Key: `upload/${Date.now()}-${file.name}`,
        Body: file,
        SliceSize: 1024 * 1024 * 5
      }, (err, data) => {
        err ? console.error('上传失败', err) : console.log('上传成功', data);
        e.target.value = ''; // 清空选择
      });
    }
  }
};
</script>

<template>
  <div>
    <input type="text" v-model="fileKey" placeholder="输入文件Key（如a/1.jpg）" />
    <button @click="getDownloadUrl">下载</button>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
export default {
  data() {
    return {
      fileKey: '',
      cos: new COS({
        SecretId: '您的 SecretId',
        SecretKey: '您的 SecretKey'
      })
    };
  },
  methods: {
    getDownloadUrl() {
      if (!this.fileKey) return;
      this.cos.getObjectUrl({
        Bucket: 'examplebucket-1250000000',
        Region: 'COS_REGION',
        Key: this.fileKey
      }, (err, data) => {
        if (err) return console.error(err);
        // 构建强制下载链接
        const downloadUrl = data.Url + (data.Url.includes('?') ? '&' : '?') + 'response-content-disposition=attachment';
        window.open(downloadUrl);
      });
    }
  }
};
</script>

<template>
  <div>
    <input type="text" v-model="fileKey" placeholder="输入要删除的文件Key（如a/1.jpg）" />
    <button @click="deleteFile">删除文件</button>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
export default {
  data() {
    return {
      fileKey: '',
      cos: new COS({
        SecretId: '您的 SecretId',
        SecretKey: '您的 SecretKey'
      })
    };
  },
  methods: {
    deleteFile() {
      if (!this.fileKey.trim()) return;
      this.cos.deleteObject({
        Bucket: 'examplebucket-1250000000',
        Region: 'COS_REGION',
        Key: this.fileKey.trim()
      }, (err, data) => {
        if (err) {
          console.error('删除失败', err);
        } else {
          console.log('删除成功', data);
          this.fileKey = ''; // 清空输入
        }
      });
    }
  }
};
</script>