阿里云对象存储OSSBrowser.js断点续传上传-云淘科技

注意事项

• 当您使用webpack或browserify等打包工具时，请通过npm install ali-oss的方式安装Browser.js SDK。

• 通过浏览器访问OSS时涉及跨域请求，如果未设置跨域规则，浏览器会拒绝跨域访问请求。如果您希望通过浏览器可以正常访问OSS，需要通过OSS设置跨域规则。具体操作，请参见准备工作。

• 由于Browser.js SDK通常在浏览器环境下使用，为避免暴露阿里云账号访问密钥（AccessKey ID和AccessKey Secret），强烈建议您使用临时访问凭证的方式执行OSS相关操作。

  临时访问凭证包括临时访问密钥（AccessKey ID和AccessKey Secret）和安全令牌（SecurityToken）。获取临时访问凭证的具体操作，请参见使用STS进行临时授权。

示例代码

以下代码用于断点续传上传：

  
    
    
  
  
    上传
    暂停
    恢复上传
    
    
    
      const client = new OSS({
       // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
       region: 'yourRegion',
       // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // 从STS服务获取的安全令牌（SecurityToken）。
       stsToken: 'yourSecurityToken',
       // 填写Bucket名称，例如examplebucket。
       bucket: "examplebucket",
    });
      // 生成用于断点续传上传的文件，大小为100 MB。
      const fileContent = Array(1024 * 1024 * 100)
        .fill("a")
        .join("");
      const file = new File([fileContent], "multipart-upload-file");
      // 上传至Bucket内Object的完整路径，例如exampledir/exampleobject.txt。
      const name = "test.txt";
      // 定义中断点。
      let abortCheckpoint;
      // 获取上传和中断DOM。
      const submit = document.getElementById("submit");
      const pause = document.getElementById("pause");
      // 获取续传DOM。
      const resume = document.getElementById("resume");

      // 监听上传按钮，单击后“上传“后开始上传。
      submit.addEventListener("click", () => {
        client
          .multipartUpload(name, file, {
            progress: (p, cpt, res) => {
              // 为中断点赋值。
              abortCheckpoint = cpt;
              console.log(abortCheckpoint);
              // 获取上传进度。
              console.log(p * 100);
            },
          })
          .then((r) => console.log(r));
      });
      // 监听暂停按钮。
      pause.addEventListener("click", () => {
        // 暂停上传。
        client.cancel();
      });

      const resumeUpload = async () => {
        // 设置重试次数为五次。
        try {
          const result = await client.multipartUpload(name, file, {
            checkpoint: abortCheckpoint,
            progress: (p, cpt, res) => {
              // 为了实现断点上传，您可以在上传过程中保存断点信息（checkpoint）。发生上传错误后，将已保存的checkpoint作为参数传递给multipartUpload，此时将从上次上传失败的地方继续上传。
              abortCheckpoint = cpt;
              // 获取上传进度。
              console.log(p);
            },
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      };

      // 监听续传按钮，单击”恢复上传“后继续上传。
      resume.addEventListener("click", async () => {
        await resumeUpload();
      });
    
  

            

相关文档

关于断点续传上传的完整示例代码，请参见GitHub示例。