如何通過斷點續傳上傳的方式將檔案上傳到OSS - Object Storage Service

通過斷點續傳上傳的方式將檔案上傳到OSS前，您可以指定斷點記錄點。上傳過程中，如果出現網路異常或程式崩潰導致檔案上傳失敗時，將從斷點記錄處繼續上傳未上傳完成的部分。

注意事項

當您使用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進行臨時授權。

範例程式碼

以下代碼用於斷點續傳上傳：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="submit">上傳</button>
    <button id="pause">暫停</button>
    <button id="resume">恢複上傳</button>
    <!--匯入SDK檔案-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      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();
      });
    </script>
  </body>
</html>

Object Storage Service：Browser.js斷點續傳上傳

注意事項

範例程式碼

相關文檔