通过COS上传文件至腾讯云

最近在做项目的时候，很多次通过Cos将文件上传到腾讯云。腾讯官方也提供了专门的API接口（cloud.tencent.com/document/pr… ）

通过Cos上传的大体思路是这样的，第一步：实例化一个Cos。第二步：通过后端接口获取秘钥。第三步：选择需要上传的文件进行文件上传，上传成功之后，在回调函数中会返回文件的地址。第四步：再将这个地址通过后端接口保存到数据库中，就可以在项目中使用上传的文件。当然上传之前还需进行相关配置，Bucket： 存储桶 Bucket 的名称，命名规则为 BucketName-APPID，此处填写的存储桶名称必须为此格式。Region：Bucket 所在地域，枚举值请参阅 地域和访问域名：cloud.tencent.com/document/pr…

1、安装cos-js-sdk-v5

npm install cos-js-sdk-v5 --save

2、引入cos-js-sdk-v5我这里是局部引入，当然也可以在main.js里面全局引入。

import Cos form 'cos-js-sdk-v5'

3、实例初始化Cos

// 初始化上传文档实例
created(){
    this.cos = new Cos({ 
      getAuthorization: this.getDocSignature
    })
},
methods: {
    // 获取上传文档签名
    getDocSignature(options, callback) {
      const that = this
      $.ajax({
        url: '后台提供的请求地址', // 获取客户端上传签名的 URL
        type: 'GET',
        dataType: 'json',
        success(result) { // result 是派发签名服务器的回包
          if (result.code === statusCode.SUCCESS) {
            const fileKey = JSON.parse(result.data.fileKey).data
            callback({
              TmpSecretId: fileKey.credentials.tmpSecretId,
              TmpSecretKey: fileKey.credentials.tmpSecretKey,
              XCosSecurityToken: fileKey.credentials.sessionToken,
              ExpiredTime: fileKey.expiredTime
            })
          } else {
            // 获取秘钥失败的相关操作
          }
        }
      })
    },
    uploadDoc() { // 调取文档上传相关接口
      this.cos.sliceUploadFile({
        Bucket: '99999',  // 桶的名字，命名规则为{name}-{appid} ，此处填写的存储桶名称必须为此格式
        Region: '地区',   //Bucket所在的区域
        Key: this.fileObj.name,
        Body: this.fileObj, // 文件的信息
      }, (err, data) => {
        if (!err && data) {
          this.fileName = this.fileObj.name
          this.key = data.Key
          this.fileId = data.Key
          this.cos.getObjectUrl({ // 获取文件访问地址
            Method: 'PUT',
            Key: this.key,
            Bucket: 'aaa',
            Region: '地区',
            Sign: false
          }, (err, data) => {
            if (!err) { // 文档地址
              this.fileUrl = data.Url
            } else {
              this.$message.error('上传失败')
            }
          })
        } else {
          this.$message.error('上传失败')
        }
      })
}

秘钥可以是永久的也可以是临时的，由于密钥放在前端会暴露 SecretId和SecretKey，所以把永久密钥过程放在后端，前端通过发送一个ajax请求获取临时秘钥，这样安全性会更高。