Tüm Ürünler
Search
Belge Merkezi

Object Storage Service:Resumable upload (Browser.js SDK)

Son Güncelleme:Oct 01, 2026

Kesintisiz yükleme, bir dosyayı OSS'e yüklemeden önce bir kontrol noktası belirtmenize olanak tanır. Yükleme işlemi ağ hatası veya program çökmesi nedeniyle kesintiye uğrarsa yükleme, kontrol noktasından devam ettirilebilir.

Kullanım notları

  • Webpack ve Browserify gibi paketleme araçlarını kullanırken npm install ali-oss komutunu çalıştırarak Browser.js için OSS SDK'yı yükleyin.

  • Bir tarayıcıdan bir OSS paketine erişmek istiyorsanız ancak paket için CORS kuralları yapılandırılmamışsa tarayıcı isteği reddeder. Bu nedenle bir pakete tarayıcı üzerinden erişmek istiyorsanız paket için CORS kurallarını yapılandırmanız gerekir. Daha fazla bilgi için bkz. Kurulum.

  • Browser.js için OSS SDK çoğunlukla tarayıcılarda kullanılır. AccessKey çiftinizin ifşa olmasını önlemek amacıyla OSS'e erişirken Security Token Service (STS) üzerinden elde edilen geçici kimlik bilgilerini kullanmanızı öneririz.

    Geçici kimlik bilgileri; bir AccessKey çifti ve bir güvenlik belirtecinden oluşur. AccessKey çifti bir AccessKey ID ve bir AccessKey Secret içerir. Geçici kimlik bilgilerinin nasıl elde edileceği hakkında daha fazla bilgi için bkz. Geçici erişim yetkilendirmesi için STS kullanma.

Örnek kod

Aşağıdaki kod, kesintisiz bir yükleme işlemini gösteren bir örnektir.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="submit">Upload</button>
    <button id="pause">Pause</button>
    <button id="resume">Resume Upload</button>
    <!--Import the SDK file.-->
    <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({
       // Set yourRegion to the region where the bucket is located. For example, if the region is China (Hangzhou), set yourRegion to oss-cn-hangzhou.
       region: 'yourRegion',
       authorizationV4: true,
       // The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from Security Token Service (STS).
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // The security token (SecurityToken) obtained from STS.
       stsToken: 'yourSecurityToken',
       // Specify the bucket name, for example, examplebucket.
       bucket: "examplebucket",
    });
      // Generate a 100 MB file for the resumable upload.
      const fileContent = Array(1024 * 1024 * 100)
        .fill("a")
        .join("");
      const file = new File([fileContent], "multipart-upload-file");
      // The full path of the object. Example: exampledir/exampleobject.txt.
      const name = "test.txt";
      // Define the checkpoint.
      let abortCheckpoint;
      // Get the upload and pause DOM elements.
      const submit = document.getElementById("submit");
      const pause = document.getElementById("pause");
      // Get the resume DOM element.
      const resume = document.getElementById("resume");

      // Add a listener to the upload button. The upload starts when you click Upload.
      submit.addEventListener("click", () => {
        client
          .multipartUpload(name, file, {
            progress: (p, cpt, res) => {
              // Assign a value to the checkpoint.
              abortCheckpoint = cpt;
              console.log(abortCheckpoint);
              // Obtain the upload progress.
              console.log(p * 100);
            },
          })
          .then((r) => console.log(r));
      });
      // Add a listener to the pause button.
      pause.addEventListener("click", () => {
        // Pause the upload.
        client.cancel();
      });

      const resumeUpload = async () => {
        // Set the number of retries to five.
        try {
          const result = await client.multipartUpload(name, file, {
            checkpoint: abortCheckpoint,
            progress: (p, cpt, res) => {
              // To implement resumable upload, you can save the checkpoint information during the upload. If an upload error occurs, pass the saved checkpoint as a parameter to multipartUpload. The upload then resumes from the point of the last failure.
              abortCheckpoint = cpt;
              // Obtain the upload progress.
              console.log(p);
            },
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      };

      // Add a listener to the resume button. The upload continues when you click Resume Upload.
      resume.addEventListener("click", async () => {
        await resumeUpload();
      });
    </script>
  </body>
</html>
            

İlgili bağlantılar

Kesintisiz yüklemeler için eksiksiz örnek kodu görmek üzere GitHub örneğine