二、微信小程序-分块上传，断点续传

引入cos配置，请查看小程序引入cos配置
分块上传方法：
1、采用cos高级上传cos.uploadFile。通过设置分块阈值SliceSize，达到阈值采用分块上传，没有达到阈值采用简单上传。
也就是说高级上传cos.uploadFile，它可以上传任何大小的文件。
2、直接采用cos分块上传cos.sliceUploadFile。
3、采用cos分块上传组合api：

• cos.multipartInit初始化分块上传任务
• cos.multipartUpload分块上传文件
• cos.multipartComplete完成整个文件的分块上传

---

一、cos高级上传uploadFile

1、获取临时秘钥，初始化cos

// 推荐用法
export const cos = new COS({
  Protocol: "https:",
  SimpleUploadMethod: "putObject",
  getAuthorization: function (options, callback) {
    app.api.getCos().then((res) => {
      console.log('cos临时秘钥----------', res);
      if (res?.Body) {
        callback({
          TmpSecretId: res.Body.TmpSecretId,
          TmpSecretKey: res.Body.TmpSecretKey,
          SecurityToken: res.Body.SessionToken,
          StartTime: res.Body.StartTime,
          ExpiredTime: res.Body.ExpiredTime,
        });
      }
    });
  },
});

// 不使用临时秘钥，也可以这么写，不推荐
// 秘钥对 SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理;
// export const cos = new COS({
//   SecretId: "AKIDGUiu3AHQ8jasdvfTnBTfmQvCIApFP",
//   SecretKey: "AC2kYGrPxMdokasdzIQK2VkpnY5OEx",
//   Protocol: "https:",
//   SimpleUploadMethod: "putObject",
// });

2、使用cos高级上传-进行分块上传

2.1、高级上传cos.uploadFile。 通过设置分块上传阈值，达到阈值就采用分块上传sliceUploadFile，否则就是简单上传putObject
俩个重要回调函数：
onProgress：

• 每个分块上传成功时，才会执行
• 每一个分块上传时，都会返回一个progressData对象。progressData有以下四个值
• loaded已上传文件的大小、total整个文件大小、 speed上传速度、 percent上传百分比(小数形式)

onTaskReady：

• 分块不管上传成功还是失败，都会返回一个taskId，且每次上传只执行一次
• taskId标识当前上传任务的id。继续上传，暂停上传，需要taskId

callBack：在 上传失败、上传成功、onProgress、onTaskReady 都会执行callBack回调函数。分别将 失败信息、 访问url、 progressData对象、taskId任务id 等信息 。抛出去

export function cosUpload(file, callBack) {
  const { filePath } = file;
  const BucketRegion = getBucketRegion(); // 拿到存储桶地域，名称
  cos.uploadFile(
    {
      ...BucketRegion,
      Key: getCosKey(file), // 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段
      FilePath: filePath, // 上传文件路径，必须字段
      ChunkSize: 1048576, // 分块上传时，每块的字节数大小，默认值1048576(1MB)1MB是分块最小值
      SliceSize: 1024 * 1024 * 3, // 触发分块上传的阈值，超过3MB使用分块上传，小于3MB使用简单上传。可自行设置，非必须
      onProgress: function (progressData) {
        callBack && callBack({ progress: progressData });
      },
      onTaskReady: function (taskId) {
        callBack && callBack({ taskId: taskId });
      },
    },
    function (err, data) {
      if (err) {
        console.error("【uploadFile】上传失败", err);
        callBack && callBack({ err: err });
      } else {
        getCosObjectUrl(
          {
            ...BucketRegion,
            Key: getCosKey(file),
            Sign: false, // true获取带签名的对象URL
          },
          (res) => {
            callBack && callBack({ url: res });
          }
        );
      }
    }
  );
}

2.2、继续上传，暂停上传，获取访问Url

• 暂停上传
  • 调用pauseTask方法，参数是当前任务的任务id
• 继续上传
  • 调用restartTask方法，参数是当前任务的任务id
  • 可以用于开启用户手动停止的（调用 pauseTask 停止）或者因为上传错误(断网等因素)而停止的上传任务。
  • 这个时候可以继续上传，不在需要重新选择文件上传

// 继续上传
export function cosTaskContinue(taskId) {
  cos.restartTask(taskId);
}
// 暂定上传
export function cosTaskPause(taskId) {
  cos.pauseTask(taskId);
}

// 拿对象访问URL
function getCosObjectUrl(data, urlCallBack) {
  cos.getObjectUrl({ ...data }, function (err, data) {
    if (err) {
      return console.error("【getObjectUrl】获取存储对象Url失败", err);
    }
    /* url为对象访问 url */
    const CosObjectUrl = data.Url;
    urlCallBack(CosObjectUrl);
  });
}

3、具体代码实现

调用封装高级上传方法
progress: {}, // 每个分块上传成功-返回的信息
taskId: “”, // 上传任务id
err: false, // true上传失败/上传暂停

  handlePiecemeal() {
    let that = this;
    wx.chooseMedia({
      count: 1,
      mediaType: ["video"],
      sourceType: ["album", "camera"],
      maxDuration: 30,
      sizeType: ["compressed"],
      camera: "back",
      success(data) {
        const timestamp = new Date().getTime();
        const random = Math.ceil(Math.random() * 10000);
        const params = {
          fileName: timestamp + random,
          filePath: data.tempFiles[0].tempFilePath,
          storagePath: "file/",
        };
        // cosUpload封装的cos高级上传
        cosUpload(params, (data) => {
          if (data?.taskId) {
            that.setData({
              taskId: data.taskId,
            });
          };
          if (data?.err) {
            that.setData({
              err: true,
            });
          };
          if (
            data?.progress &&
            data?.progress.percent != 0 &&
            data?.progress.loaded != 0
          ) {
            data.progress.speed = Math.ceil(data.progress.speed / 1024);
            data.progress.percent = Math.ceil(data.progress.percent * 100);
            that.setData({
              progress: data.progress,
            });
          };
          if (data?.url) {
            console.log("上传成功", data.url);
            wx.showToast({
              title: "上传成功，请在控制台查看",
              icon: "none",
              duration: 1800,
            });
            that.setData({
              err: false,
              taskId: "",
            });
          };
        });
      },
    });
  },

---

二、cos分块上传sliceUploadFile

使用示例参数：

• Bucket：存储桶名称

• Region：存储桶地域

• Key： 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）

• FilePath：文件临时路径

• FileSize：文件大小

• onTaskReady：上传任务创建时的回调函数，返回一个 taskId

• onHashProgress：计算文件的进度回调函数，返回progressData对象

  • loaded 已经校验的文件部分大小
  • total 整个文件的大小
  • speed 文件的校验速度
  • percent 文件的校验百分比

• onProgress：上传文件的进度回调函数，返回progressData对象

  • loaded 已经上传的文件部分大小
  • total 整个文件的大小
  • speed 文件的上传速度
  • percent 文件的上传百分比

var sliceUploadFile = function (file) {
    var key = file.name;
    cos.sliceUploadFile({
        Bucket: 'examplebucket-1250000000',         	/* 必须 */
        Region: 'COS_REGION',         	/* 必须 */
        Key: 'exampleobject',           /* 必须 */
        FilePath: file.path,            /* 必须 */
        FileSize: file.size,            /* 非必须 */
        onTaskReady: function(taskId) { /* 非必须 */
            console.log(taskId);
        },
        onHashProgress: function(info) { /* 非必须 */
            console.log('check hash', JSON.stringify(info));
        },
        onProgress: function(info) {     /* 非必须 */
            console.log(JSON.stringify(info));
        }
    }, callback);
};
wx.chooseMessageFile({
    count: 1,
    type: 'all',
    success: function(res) {
        sliceUploadFile(res.tempFiles[0]);
    }
});

三、分块上传组合式api

讲一下大概思路：

实现效果

基于高级上传的实现效果

小程序分块上传，断点续传