前言

先上波官方文档地址：https://cloud.tencent.com/document/product/436/11459

需要提前准备好密钥信息SecretId、SecretKey、以及相应的配置信息；
相应的信息可以在这里找到：https://cloud.tencent.com/document/product/436/7751

以下demo包含javascript SDK和Node.js SDK两种实现方式，更多方案请移步官方文档查阅。

注意！部署到生产环境请务必使用临时密钥，不要使用固定密钥，避免泄露

js实现

1、安装依赖

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

2、引入

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

  const config = {
    SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    Bucket: '存储桶名称',
    Region: '存储桶地域名',
  };

  // 实例化cos
  const cos = new COS({
    SecretId: config.SecretId,
    SecretKey: config.SecretKey,
  });

3、使用

这里使用的是element ui，el-upload上传方式默认是使用action直接调用接口上传的，由于该上传是是直接调用cos方法，所以action这里不需要填，写个空值，把自定义方法绑定到http-request上

<el-upload
  class="upload-demo"
  action=""
  :data="{Key:value}"
  :file-list="fileList"
  :http-request="uploadToCos"
>
</el-upload>
data(){
  return {
    fileList: []
  }
}
methods:{
  // 上传到腾讯云cos
  uploadToCos(file){
    const fileInfo = file.file;
    const data = file.data;
    const that = this;
    cos.putObject({
      Bucket: config.Bucket,
      Region: config.Region,
      Key: `/`, // 存储的路径
      Body: fileInfo, // 上传对象
      onProgress: progressData => {
        const percent = parseInt(progressData.percent * 10000) / 100;
        const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
        console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
      },
    }, (err, data) => {
      if(data && data.statusCode == 200) {
        console.log(data);
        console.log('上传完成！');
      }else {
        console.log(err);
        console.log('上传失败！错误信息：' + err.message);
      }
    });
  },
}

4、完整demo

<template>
    <div>
      <el-upload
        class="upload-demo"
        action=""
        :data="{Key:value}"
        :file-list="fileList"
        :http-request="uploadToCos"
      >
        <el-button size="small" type="primary">上传到cos</el-button>
      <el-upload>
    </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
  const config = {
    SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    Bucket: '存储桶名称',
    Region: '存储桶地域名',
  };

  const cos = new COS({
    SecretId: config.SecretId,
    SecretKey: config.SecretKey,
  });

  export default {
    data: () {
      return {
        fileList: [],
      }
    },
    methods:{
      // 上传到腾讯云cos
      uploadToCos(file){
        const fileInfo = file.file;
        const data = file.data;
        const that = this;
        cos.putObject({
          Bucket: config.Bucket,
          Region: config.Region,
          Key: `./`, // 存储的路径
          Body: fileInfo, // 上传对象
          onProgress: progressData => {
            const percent = parseInt(progressData.percent * 10000) / 100;
            const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
            console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
          },
        }, (err, data) => {
          if(data && data.statusCode == 200) {
            console.log(data);
            console.log('上传完成！');
          }else {
            console.log(err);
            console.log('上传失败！错误信息：' + err.message);
          }
        });
      },
    }
  }
</script>

NodeJs实现

1、安装依赖

npm i cos-nodejs-sdk-v5 --save

2、引入使用

<template>
    <div>
      <el-upload
        class="upload-demo"
        action="上传文件接口地址（下方文件的Node环境地址）"
        :data="{Key:value}"
        :file-list="fileList"
        :on-success="uploadSuccess"
      >
        <el-button size="small" type="primary">上传到cos</el-button>
      <el-upload>
    </div>
</template>
<script>
  export default {
    data: () {
      return {
        fileList: [],
      }
    },
    methods:{
      uploadSuccess(response, file, fileList){
        console.log('上传成功');
        console.log(fileList)
        console.log(response)
        console.log(file)
      }
    }
  }
</script>

我这里Node使用的是egg框架，以下代码为egg规范，看着办哈，换汤不换药

'use strict';

const Controller = require('egg').Controller;
const COS = require('cos-nodejs-sdk-v5');
const toArray = require('stream-to-array');

const config = {
    SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    Bucket: '存储桶名称',
    Region: '存储桶地域名',
};
const cos = new COS({
  SecretId: config.SecretId,
  SecretKey: config.SecretKey,
});

class UploadController extends Controller {
  async uploadToCos() {
    const stream = await this.ctx.getFileStream(); // 获取文件流
    const parts = await toArray(stream);
    const buf = Buffer.concat(parts);
    const data = stream.fields;
    // 处理文件
    const formData = {
      code: '',
      fileInfo: {
        fileName: stream.filename,
        fileSize: '',
        fileUrl: '',
        sha256: '',
      },
      msg: '',
    };
    return new Promise((resolve, reject) =>{
      // 单片上传
      cos.putObject({
        Bucket: config.Bucket, /* Bucket,名称 必须 */
        Region: config.Region,    /* 所属地域 必须 */
        Key: './',            /*路径 必须 */
        Body: buf, // 上传对象
      }, function(err, data) {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });

      // 分片上传
      // cos.sliceUploadFile({
      //   Bucket: config.Bucket,
      //   Region: config.Region,
      //   Key: `${config.path}/${appId}/${stream.filename}`,
      //   FilePath: './',
      //   Body: stream,
      // }, function(err, data) {
      //   if (err) {
      //     reject(err);
      //   } else {
      //     resolve(data);
      //   }
      // });
    })
  }

  async upload() {
    const result = await this.uploadToCos();
    this.ctx.body = result; // 返回的数据
  }
}

module.exports = UploadController;

临时密钥实例化COS

临时密钥跟固定密钥的用法不同，临时密钥需在后端获取再实例化COS对象，实例化成功后才可以进行COS的操作

1、获取临时密钥并实例化COS


// cos.js
import COS from 'cos-js-sdk-v5';
// 通过后端获取临时密钥信息实例化COS 
export const cos = new COS({
    getAuthorization: function (options, callback) {
      axios({
        method: 'post',
        url: 'xxx.xxx', // 获取临时密钥信息的接口url
      }).then(result => {
        if (result && result.code === 0) {
          // cos配置
          callback({
            TmpSecretId: result.TmpSecretId,
            TmpSecretKey: result.TmpSecretKey,
            SecurityToken: result.SecurityToken,
            // StartTime: Date.parse(new Date()) / 1000,
            // ExpiredTime: Date.parse(new Date()) / 1000,
          });
        }
      });
    }
  }

2、调用cos方法

<script>
 // 引入cos.js 
  import { cos } from '@/api/cos.js'
  methods: {
  // 上传到腾讯云cos
      uploadToCos(file){
        const fileInfo = file.file;
        const data = file.data;
        const that = this;
        cos.putObject({
          Bucket: config.Bucket,
          Region: config.Region, // 存储桶所在地域
          Key: `./`, // 存储的路径
          Body: fileInfo, // 上传对象
          onProgress: progressData => {
            const percent = parseInt(progressData.percent * 10000) / 100;
            const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
            console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
          },
        }, (err, data) => {
          if(data && data.statusCode == 200) {
            console.log(data);
            console.log('上传完成！');
          }else {
            console.log(err);
            console.log('上传失败！错误信息：' + err.message);
          }
        });
      },
}
</script>
© 允许规范转载