全部產品
Search
文件中心

Object Storage Service:Browser.js拷貝檔案

更新時間:Nov 13, 2024

本文介紹如何將源Bucket中的檔案(Object)複製到同一地區下相同或不同目標Bucket中。

注意事項

  • 當您使用webpack或browserify等打包工具時,請通過npm install ali-oss的方式安裝Browser.js SDK。

  • 由於Browser.js SDK通常在瀏覽器環境下使用,為避免暴露阿里雲帳號存取金鑰(AccessKey ID和AccessKey Secret),強烈建議您使用臨時訪問憑證的方式執行OSS相關操作。

    臨時訪問憑證包括臨時存取金鑰(AccessKey ID和AccessKey Secret)和安全性權杖(SecurityToken)。擷取臨時訪問憑證的具體操作,請參見授權訪問

  • 拷貝檔案涉及的源Bucket與目標Bucket均需要配置跨域規則。具體操作,請參見準備工作

同一Bucket內拷貝檔案

以下代碼用於在examplebucket內將srcobject.txt檔案拷貝至destobject.txt檔案。

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

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

<body>
  <button id='upload'>上傳</button>
  <button id='copy'>拷貝</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',
       authorizationV4: true,
       // 從STS服務擷取的臨時存取金鑰(AccessKey ID和AccessKey Secret)。
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // 從STS服務擷取的安全性權杖(SecurityToken)。
       stsToken: 'yourSecurityToken',
       // 填寫Bucket名稱,例如examplebucket。
       bucket: "examplebucket",
     });

    const upload = document.getElementById('upload')
    const copy = document.getElementById('copy')

    // 指定待上傳的檔案內容。
    const file = new Blob(['examplecontent'])
    // 指定待上傳檔案的完整路徑,例如srcobject.txt。
    const fileName = 'srcobject.txt'

    // 上傳檔案。
    upload.addEventListener('click', () => {
      const result = client.put(fileName, file).then(r => console.log(r))
    })

    // 拷貝檔案。
    copy.addEventListener('click', () => {
      // 指定拷貝後的檔案名稱。
      client.copy('destobject.txt', fileName
        // 設定目標檔案的HTTP頭和自訂目標檔案的中繼資料。
        //{
            // 指定headers參數,設定目標檔案的HTTP頭。如果未指定headers參數,則目標檔案與源檔案的HTTP頭相同,即拷貝源檔案的HTTP頭。
            // headers:{
            //'Cache-Control': 'no-cache',        
            // 如果源Object的ETag值和您提供的ETag相等,則執行拷貝操作,並返回200 OK。
            //'if-match': '5B3C1A2E053D763E1B002CC607C5****',
            // 如果源Object的ETag值和您提供的ETag不相等,則執行拷貝操作,並返回200 OK。
            //'if-none-match': '5B3C1A2E053D763E1B002CC607C5****', 
            // 如果指定的時間早於檔案實際修改時間,則執行拷貝操作,並返回200 OK。
            //'if-modified-since': '2021-12-09T07:01:56.000Z', 
            // 如果指定的時間晚於檔案實際修改時間,則執行拷貝操作,並返回200 OK。
            //'if-unmodified-since': '2021-12-09T07:01:56.000Z', 
            // 指定OSS建立目標Object時的存取權限,此處設定為private,表示只有Object的擁有者和授權使用者有該Object的讀寫權限,其他使用者沒有許可權操作該Object。
            //'x-oss-object-acl': 'private', 
            // 指定Object的對象標籤,可同時設定多個標籤。
            //'x-oss-tagging': 'Tag1=1&Tag2=2',
            // 指定CopyObject操作時是否覆蓋同名目標Object。此處設定為true,表示禁止覆蓋同名Object。
            //'x-oss-forbid-overwrite': 'true', 
    //},
        // 指定meta參數,自訂目標檔案的中繼資料。如果未指定meta參數,目標檔案與源檔案的中繼資料相同,即拷貝源檔案的中繼資料。
        // meta:{
            // location: 'hangzhou',
            // year: 2015,
            // people: 'mary'
        //}
        // }
      ).then(r => {
        console.log(r.res.status)
      })
    })

  </script>
</body>

</html>

不同Bucket間拷貝檔案

以下代碼用於將源儲存空間srcbucket內srcobject.txt檔案拷貝至目標儲存空間的destbucket的destobject.txt檔案。

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

  <body>
    <button id="copy">複製</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",
        authorizationV4: true,
        // 從STS服務擷取的臨時存取金鑰(AccessKey ID和AccessKey Secret)。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 從STS服務擷取的安全性權杖(SecurityToken)。
        stsToken: "yourSecurityToken",
        // 填寫目標bucket名稱。
        bucket: "destbucket",
      });
      const copy = document.getElementById("copy");

      copy.addEventListener("click", () => {
        client
          .copy(
            // 填寫拷貝後的檔案名稱。
            "srcobject.txt",
            // 填寫拷貝前的檔案名稱。
            "destobject.txt",
            // 填寫源Bucket名稱。
            "srcbucket"
          )
          .then((r) => console.log(r));
      });
    </script>
  </body>
</html>

相關文檔

  • 關於拷貝檔案的完整範例程式碼,請參見GitHub樣本

  • 關於拷貝檔案的API介面說明,請參見CopyObject