import COS from 'cos-js-sdk-v5';
const cos = new COS({
    getAuthorization: async function (options, callback) {
      const data = await fetchSts('xxxx'); // The logic for obtaining temporary credentials needs to be implemented by yourself.
      callback({
        TmpSecretId: data.credentials.tmpSecretId,
        TmpSecretKey: data.credentials.tmpSecretKey,
        SecurityToken: data.credentials.sessionToken,
        // It is recommended to return the server time as the start time of the signature to avoid signature errors caused by excessive deviation in the client's local time.
        StartTime: data.startTime, // Timestamp in seconds, such as 1580000000
        ExpiredTime: data.expiredTime, // Timestamp in seconds, such as 1580000000
        ScopeLimit: true, // Fine-grained permission control needs to be set to true, which restricts the key to be reused only for the same request.
      });
    }
});

import COS from 'cos-js-sdk-v5';
const cos = new COS({
    // For other configuration items, refer to the Configuration Items for Initialization below.
    // required parameters for getAuthorization
    getAuthorization: function (options, callback) {
        // It is not called during initialization; it will only be entered when cos methods are called (such as cos.putObject)
        // Asynchronously obtain temporary credentials
        // Server-side JS example: https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // For server-side implementations in other languages, refer to COS STS SDK: https://github.com/tencentyun/qcloud-cos-sts-sdk.
        // For detailed STS documentation, see: https://cloud.tencent.com/document/product/436/14048.
        const stsUrl = 'http://example.com/server/sts'; // Replace stsUrl with your own backend service.
        fetch(stsUrl)
          .then(response => response.json())
          .then(data => {
            if (!data || !data.credentials) {
              return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
            }
            // Check the credentials format.
            const { credentials } = data;
            console.log(credentials);
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              SecurityToken: credentials.sessionToken,
              // It is recommended to return the server time as the start time of the signature to avoid signature errors caused by significant deviation in the client's local time.
              StartTime: data.startTime, // Timestamp in seconds, such as 1580000000
              ExpiredTime: data.expiredTime, // Timestamp in seconds, such as 1580000000
              ScopeLimit: true, // Fine-grained permission control needs to be set to true, which restricts the key to be reused only for the same request.
            });
          })
          .catch(error => {
            console.error('Failed to obtain temporary credentials', error);
          });
    }
});
export default cos;

import cos from 'utils/cos';

let taskId;
// Upload file, file is the selected file.
async function upload(file) {
  try {
    const data = await cos.uploadFile({
      Bucket: 'examplebucket-1250000000', // Replace with your own bucket name. Required.
      Region: 'COS_REGION',     // The region where the bucket is located. Required.
      Key: '1.jpg',            // The object key stored in the bucket (such as 1.jpg and a/b/test.txt). Required.
      Body: file, // Upload file object.
      SliceSize: 1024 * 1024 * 5,  // Threshold for triggering multipart upload. Files larger than 5MB use multipart upload; files smaller than 5MB use simple upload. Can be customized. Optional.
      onProgress: function(progressData) {
        console.log('Upload progress:', progressData);
      },
      onTaskReady: function(id) { // Optional
        taskId = id;
      },
    });
    console.log('Upload succeeded', data);
  } catch (e) {
    console.error('Upload failed', e);
  }
}
// Listen to the upload queue.
cos.on('update-list', data => {
    console.log(data);
});
// Pause the upload task.
cos.pauseTask(taskId);
// Restart the upload task.
cos.restartTask(taskId);
// Cancel the upload task.
cos.cancelTask(taskId)

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

// For SECRETID and SECRETKEY, please log in to https://console.cloud.tencent.com/cam/capi to view and manage them.
const cos = new COS({
   SecretId: process.env.SecretId, // It is recommended to obtain via environment variables; User's SecretId. It is recommended to use sub-account keys, with authorization following the principle of least privilege to mitigate usage risks. For how to obtain sub-account keys, refer to https://cloud.tencent.com/document/product/598/37140
   SecretKey: process.env.SecretKey, // It is recommended to obtain via environment variables; User's SecretKey. It is recommended to use sub-account keys, with authorization following the principle of least privilege to mitigate usage risks. For how to obtain sub-account keys, refer to https://cloud.tencent.com/document/product/598/37140
});

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

<template>
  <div>
    <input type="file" @change="handleUpload" />
  </div>
</template>
<script>
// Directly import cos-js-sdk-v5 (via npm installation).
import COS from 'cos-js-sdk-v5';

export default {
  methods: {
    handleUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      // Initialize COS instance directly within the component
      const cos = new COS({
        SecretId: 'your SecretId',    // Replace with actual SecretId
        SecretKey: 'your SecretKey'   // Replace with actual SecretKey.
      });
      // Call the upload method
      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('Upload failed', err) : console.log('Upload succeeded', data);
        e.target.value = ''; // Clear selection.
      });
    }
  }
};
</script>

<template>
  <div>
    <input type="text" v-model="fileKey" placeholder="Enter file Key (e.g., a/1.jpg)" />
    <button @click="getDownloadUrl">Download</button>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
export default {
  data() {
    return {
      fileKey: '',
      cos: new COS({
        SecretId: 'your SecretId',
        SecretKey: 'your 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);
        // Build a link for forced download
        const downloadUrl = data.Url + (data.Url.includes('?') ? '&' : '?') + 'response-content-disposition=attachment';
        window.open(downloadUrl);
      });
    }
  }
};
</script>

<template>
  <div>
    <input type="text" v-model="fileKey" placeholder="Enter file Key to delete (e.g., a/1.jpg)" />
    <button @click="deleteFile">Delete File</button>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
export default {
  data() {
    return {
      fileKey: '',
      cos: new COS({
        SecretId: 'your SecretId',
        SecretKey: 'your 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('Deletion failed', err);
        } else {
          console.log('Deletion successful', data);
          this.fileKey = ''; // Clear input.
        }
      });
    }
  }
};
</script>