OSS SDK for Brower.jsを使用してオブジェクトメタデータを管理する方法 - Object Storage Service

Object Storage Service (OSS) に保存されているオブジェクトは、キー、データ、およびメタデータで構成されます。オブジェクトメタデータは、オブジェクト属性を記述する。オブジェクトメタデータには、標準HTTPヘッダーとユーザーメタデータが含まれます。標準のHTTPヘッダーを設定することで、オブジェクトキャッシュポリシーや強制オブジェクトダウンロードポリシーなどのカスタムHTTPリクエストポリシーを作成できます。オブジェクトのユーザーメタデータを設定して、オブジェクトの目的または属性を識別できます。

使用上の注意

WebpackやBrowserifyなどのパッケージングツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。
ブラウザからOSSバケットにアクセスしたいが、バケットにCORSルールが設定されていない場合、ブラウザはリクエストを拒否します。したがって、ブラウザからバケットにアクセスする場合は、バケットのCORSルールを設定する必要があります。詳細については、「インストール」をご参照ください。
ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。
一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。

サンプルコード

次のコードでは、アップロード時にオブジェクトメタデータを指定する方法と、アップロード後にオブジェクトメタデータを更新および照会する方法の例を示します。

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

<ヘッド>
  <meta charset="UTF-8" />
  <title> ドキュメント </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({
       // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
       リージョン: 'yourRegion' 、
       // Security Token Service (STS) から取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
       accessKeyId: 'yourAccessKeyId' 、
       accessKeySecret: 'yourAccessKeySecret' 、
       // STSから取得したセキュリティトークンを指定します。 
       stsToken: 'yourSecurityToken' 、
       // バケットの名前を指定します。 例: examplebucket. 
       bucket: "examplebucket" 、
     });

    const upload = document.getElementById('upload')
    const update = document.getElementById('update')
    const check = document.getElementById('check')

    // アップロードするオブジェクトのコンテンツを指定します。 
    const file = new Blob(['examplectent'])
    // バケットにアップロードするオブジェクトの名前を指定します。 
    const fileName = 'exampleobject.txt'

    // Upload the object. 
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // ユーザーメタデータを指定します。 オブジェクトに複数のメタデータセットを設定できます。 すべてのメタデータのサイズは8 KBを超えることはできません。 
        meta: {
          年: 2020,
          人: 'eliot'
        }
      }).then(r => console.log(r)
    })

    // オブジェクトのメタデータを変更します。 
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        年: 2021,
        人: 「エヴァン」
      }
      ).then(r => {
        console.log(r)
      })
    })
    // オブジェクトメタデータを照会します。 
    check.addEventListener('click', () => {
      // 上記のメタデータに基づいて、バケットのCORSルールのExposed Headersフィールドにx-oss-meta-yearを追加します。 それ以外の場合、コンソールに表示されるメタデータはnullです。 
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

参考資料

オブジェクトメタデータの管理に使用される完全なサンプルコードについては、『GitHub』をご参照ください。
オブジェクトのアップロード時にオブジェクトメタデータを設定または変更するために呼び出すことができるAPI操作の詳細については、「PutObject」をご参照ください。
オブジェクトメタデータを照会するために呼び出すAPI操作の詳細については、「HeadObject」をご参照ください。