记录前端使用腾讯云COS分块上传过程

在项目中遇到上传大文件的需求，使用普通上传方法速度会很慢，很影响用户体验，故想到了腾讯云的分块上传，在此记录一下我的使用过程。

访问官网：cloud.tencent.com/document/pr…

1.下载安装SDK

npm i cos-js-sdk-v5

2.vue文件中引入

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

3.方法中使用

官网推荐使用高级上传，超出限制自动使用分块上传，否则使用简单上传

function handleFunc(file) {
    // 推荐调用后端接口动态获取签名信息，不推荐前端直接写入
  postMetaToolsUploadFileToken().then((res) => {
    var cos = new COS({
      // getAuthorization 必选参数
      getAuthorization: function (options, callback) {
        const date = new Date();
        callback({
          TmpSecretId: res.data.TmpSecretId,
          TmpSecretKey: res.data.TmpSecretKey,
          SecurityToken: res.data.Token,
          // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
          StartTime: Math.floor(date.getTime() / 1000), // 时间戳，单位秒，如：1580000000
          ExpiredTime: res.data.ExpiredTime, // 时间戳，单位秒，如：1580000000
        });
      },
    });

    // 这里获取到签名信息，前端截取字符串等待使用
    const PathPrefix = res.data.PathPrefix;
    const index = PathPrefix.indexOf(".cos");
    const Bucket = PathPrefix.slice(8, index);
    const Region = PathPrefix.slice(
      PathPrefix.indexOf(".ap-") + 1,
      PathPrefix.indexOf(".myqcloud")
    );
    const Key =
      PathPrefix.slice(PathPrefix.indexOf("/customer") + 1) +
      "video/" +
      file.file.name;
    // 这里注意 Key 在拼接时文件需要拼接"video/" 或者 "idcard/"，否则请求连接错误


    cos.uploadFile(
      {
        Bucket: Bucket /* 填写自己的 bucket，必须字段 */,
        Region: Region /* 存储桶所在地域，必须字段 */,
        Key: Key /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
        Body: file.file, // 上传文件对象
        StorageClass: "STANDARD",
        SliceSize:
          1024 *
          1024 *
          50 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
        onProgress: function (progressData: any) {
          // 每块上传后返回，可以获取到文件总大小，已上传大小，占比百分比
        },
      },
      function (err, data) {
        // 上传完成或者失败后返回
        if (err) {
          // console.log("上传失败", err);
        } else {
          // console.log("上传成功", data);
        }
      }
    );
  });
}

注意：Key 在拼接时文件需要拼接"video/" 或者 "idcard/"，否则请求连接错误

（题主在这里一开始没有拼接，提交一直报错，找了好久才发现是这个问题，气~~）

到这里就可以实现大文件的分块上传了，如果还需要使用到其他方法请自行到官网查找。