js上传腾讯云cos

在网上找了半天发现用腾讯云上传图片的文档比较少，自己又遇到了一些问题，所以发出来记录一下

文档地址

cloud.tencent.com/document/pr…

操作步骤

1.安装腾讯云sdk

webpack安装：npm i cos-js-sdk-v5 --save

2.引入SDK

var COS = require('cos-js-sdk-v5')

3. 初始化

我们这里还是用的最不推荐的方法，后端直接返回了screctID和screctKey，官方推荐的其实是每次获取临时秘钥，以后有了会回来补上

const config = {
    SecretId: res.data.secretId,
    SecretKey: res.data.secretKey,
    Bucket: res.data.bucket,
    Region: res.data.region,
    Sign: res.data.sign,
    Key: res.data.key
}
var cos = new COS(this.ossConfig)

整体上传和单片上传

目前只支持单个文件上传。超过50mb可以走分片上传，sdk的api文档有批量上传的接口，目前想好怎么兼容场景
放一下上传部分的整体代码


initOss() {
    this.cos = new COS(this.ossConfig)
    // this.uploadFile()
    // 分片
    for (const file of this.files) {
      const uuid = uuidv4()
      // 大于50MB走分片上传
      if (file.size > 51200) {
        this.splitFileUpload(file, uuid)
      } else {
        this.uploadFile(file, uuid)
      }
    }
},
uploadFile(file, uuid) {
    this.cos.putObject({
      Bucket: this.ossConfig.Bucket,
      Region: this.ossConfig.Region,
      Key: uuid,
      StorageClass: 'STANDARD',
      Body: file,
      onProgress: function(progressData) {
      }
    }, (err, data) => {
      if (err) {
        throw (err)
      }
      this.callback(data.Location)
    })
},
// 分片上传
splitFileUpload(file, uuid) {
    this.cos.sliceUploadFile({
      Bucket: this.ossConfig.Bucket,
      Region: this.ossConfig.Region,
      Key: uuid,
      Body: file,
      onTaskReady: function (taskId) {
        console.log('taskId', taskId)
      },
      onHashProgress: function (progressData) {
        console.log(JSON.stringify(progressData))
      },
      onProgress: function (progressData) {
        console.log(JSON.stringify(progressData))
      }
    }, function (err, data) {
      console.log('============================')
      console.log(err || data);
      console.log('============================')
    })
}

遇到的问题

多片上传代码报错 parts[i].ETag.indexOf is not a function

触发场景以及现象
切片上传,进度走到99的时候，会触发此报错并且无法触发多片上传的回调
解决方法
进入cos后台，将跨域访问cros修改规则的expose-headers项中添加值 ETag

ETag的作用
etag是对象被创建时标识对象内容的信息标签，可用于检查对象的内容是否发生变化。