Cara mencegah penimpaan file dengan nama yang sama menggunakan Browser.js SDK - Object Storage Service

Secara default, objek baru akan menimpa objek yang sudah ada dengan nama yang sama jika Anda memiliki izin akses yang diperlukan. Topik ini menjelaskan cara mencegah perilaku tersebut dengan mengatur header permintaan x-oss-forbid-overwrite untuk unggah simple, salinan objek, dan unggah multi-bagian.

Catatan penggunaan

Saat menggunakan alat packaging seperti Webpack dan Browserify, instal OSS SDK untuk Browser.js dengan menjalankan perintah npm install ali-oss.
Jika Anda ingin mengakses bucket OSS dari browser tetapi tidak ada aturan CORS yang dikonfigurasi untuk bucket tersebut, browser akan menolak permintaan tersebut. Oleh karena itu, Anda harus mengonfigurasi aturan CORS untuk bucket jika ingin mengaksesnya dari browser. Untuk informasi selengkapnya, lihat Instalasi.
Dalam kebanyakan kasus, OSS SDK untuk Browser.js digunakan di browser. Untuk mencegah pasangan AccessKey Anda terpapar, kami menyarankan agar Anda menggunakan kredensial akses temporary yang diperoleh dari Security Token Service (STS) untuk mengakses OSS.
Kredensial akses temporary terdiri dari pasangan AccessKey dan token keamanan. Pasangan AccessKey terdiri dari ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses temporary, lihat Gunakan STS untuk otorisasi akses temporary.

Unggah simple

Kode berikut menunjukkan cara mencegah objek dengan nama yang sama ditimpa selama unggah simple:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <button id='upload'>Upload</button>
   <!--Impor file 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({
       // Setel yourRegion ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), setel yourRegion ke oss-cn-hangzhou.
       region: 'yourRegion',
       authorizationV4: true,
       // ID AccessKey dan Rahasia AccessKey temporary yang diperoleh dari Security Token Service (STS).
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // Token keamanan (SecurityToken) yang diperoleh dari STS.
       stsToken: 'yourSecurityToken',
       // Tentukan nama bucket. Contoh: examplebucket.
       bucket: "examplebucket",
      });

    const upload = document.getElementById('upload')

    // Tentukan file lokal yang akan diunggah.
    const fileContent = Array(1024 * 1024 * 10).fill('a').join('')
    const fileName = 'example.txt'
    const file = new Blob([fileContent])
    // Tentukan apakah objek dengan nama yang sama boleh ditimpa. Dalam contoh ini, parameter ini diatur ke true, yang berarti objek dengan nama yang sama tidak dapat ditimpa. Jika objek dengan nama yang sama sudah ada, akan muncul error.
    const headers = {
      'x-oss-forbid-overwrite': true
    }
    upload.addEventListener('click', () => {
      // Unggah file.
      client.put(fileName, file, { headers }).then(r => console.log(r))
    })

  </script>
</body>

</html>

Salin file

Kode berikut menunjukkan cara mencegah objek dengan nama yang sama ditimpa saat menyalin objek:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <button id='upload'>Upload</button>
   <!--Impor file 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({
       // Setel yourRegion ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), setel yourRegion ke oss-cn-hangzhou.
       region: 'yourRegion',
       authorizationV4: true,
       // ID AccessKey dan Rahasia AccessKey temporary yang diperoleh dari Security Token Service (STS).
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // Token keamanan (SecurityToken) yang diperoleh dari STS.
       stsToken: 'yourSecurityToken',
       // Tentukan nama bucket. Contoh: examplebucket.
       bucket: "examplebucket",
      });

    const upload = document.getElementById('upload')

    // Tentukan file yang akan disalin.
    const fileContent = Array(1024 * 1024 * 5).fill('a').join('')
    const fileName = 'example.txt'
    const file = new Blob([fileContent])
    // Tentukan apakah objek dengan nama yang sama boleh ditimpa selama operasi salin. Dalam contoh ini, parameter ini diatur ke true, yang berarti objek dengan nama yang sama tidak dapat ditimpa. Jika objek dengan nama yang sama sudah ada, akan muncul error.
    const headers = {
      'x-oss-forbid-overwrite': true
    }
    upload.addEventListener('click', () => {
      // Salin file.
      // Setel nama file tujuan menjadi dest.txt.
      client.copy("dest.txt",fileName,{headers}).then(r=>console.log(r))
    })

  </script>
</body>

</html>

Unggah multi-bagian

Kode berikut menunjukkan cara mencegah objek dengan nama yang sama ditimpa selama unggah multi-bagian:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="upload">Upload</button>
    <!--Impor file 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({
        // Setel yourRegion ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), setel yourRegion ke oss-cn-hangzhou.
        region: 'yourRegion',
        authorizationV4: true,
        // ID AccessKey dan Rahasia AccessKey temporary yang diperoleh dari Security Token Service (STS).
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Token keamanan (SecurityToken) yang diperoleh dari STS.
        stsToken: 'yourSecurityToken',
        // Tentukan nama bucket. Contoh: examplebucket.
        bucket: "examplebucket",
      });

      const upload = document.getElementById("upload");

      // Tentukan file yang akan diunggah.
      const fileContent = Array(1024 * 1024 * 5)
        .fill("a")
        .join("");
      const fileName = "src.txt";
      const file = new Blob([fileContent]);
      // Tentukan apakah objek dengan nama yang sama boleh ditimpa. Dalam contoh ini, parameter ini diatur ke true, yang berarti objek dengan nama yang sama tidak dapat ditimpa. Jika objek dengan nama yang sama sudah ada, akan muncul error.
      const headers = {
        "x-oss-forbid-overwrite": true,
      };
      upload.addEventListener("click", () => {
        // Lakukan unggah multi-bagian.
        client
          .multipartUpload("dest.txt", file, { headers })
          .then((r) => console.log(r));
      });
    </script>
  </body>
</html>

Referensi

Untuk informasi selengkapnya tentang operasi API yang dapat Anda panggil untuk melakukan unggah simple, lihat PutObject.
Untuk informasi selengkapnya tentang operasi API yang dapat Anda panggil untuk menyalin objek, lihat CopyObject.
Metode multipartUpload dalam Browser.js SDK digunakan untuk unggah multi-bagian dan mengenkapsulasi tiga operasi API berikut:
- Untuk informasi selengkapnya tentang operasi API untuk memulai unggah multi-bagian, lihat InitiateMultipartUpload.
- Untuk informasi selengkapnya tentang operasi API untuk mengunggah bagian, lihat UploadPart.
- Untuk informasi selengkapnya tentang operasi API untuk menyelesaikan unggah multi-bagian, lihat CompleteMultipartUpload.