如何通過Browser.jsSDK管理檔案中繼資料 - Object Storage Service

Object Storage Service儲存的檔案（Object）資訊包含Key、Data和Object Meta。Object Meta是對檔案的屬性描述，包括HTTP標準屬性（HTTP Header）和使用者自訂中繼資料（User Meta）兩種。您可以通過設定HTTP標準屬性來自訂HTTP請求的策略，例如檔案（Object）緩衝策略、強制下載策略等。您還可以通過設定使用者自訂中繼資料來標識Object的用途或屬性等。

注意事項

當您使用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）。擷取臨時訪問憑證的具體操作，請參見授權訪問。

範例程式碼

以下代碼用於上傳檔案時指定中繼資料，並在檔案上傳後更新和查看檔案中繼資料。

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

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

<body>
  <button id='upload'>上傳</button>
  <button id='update'>修改中繼資料</button>
  <button id='check'>查看中繼資料</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 update = document.getElementById('update')
    const check = document.getElementById('check')

    // 指定待上傳的檔案內容。
    const file = new Blob(['examplecontent'])
    // 指定上傳至Bucket中的Object名稱。
    const fileName = 'exampleobject.txt'

    // 上傳檔案。
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // 指定自訂中繼資料。單個檔案可以有多個中繼資料，但總大小不能超過8 KB。
        meta: {
          year: 2020,
          people: 'eliot'
        }
      }).then(r => console.log(r))
    })

    // 修改中繼資料。
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        year: 2021,
        people: 'evan'
      }
      ).then(r => {
        console.log(r)
      })
    })
    // 查看中繼資料。
    check.addEventListener('click', () => {
      // 根據以上代碼配置的中繼資料，您需要在Bucket跨域規則的暴露Headers配置項中添加x-oss-meta-year，否則console列印的meta為null。
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

Object Storage Service：Browser.js管理檔案中繼資料

注意事項

範例程式碼

相關文檔