Browser.js SDK を使用してファイルメタデータを管理する方法 - 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 Secret で構成されます。一時的なアクセス認証情報を取得する方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。

サンプルコード

次のコードは、ファイルをアップロードする際にメタデータを指定し、アップロード後にファイルメタデータを更新および表示する方法を示しています。

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

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

<body>
  <button id='upload'>Upload</button>
  <button id='update'>Update Metadata</button>
  <button id='check'>View Metadata</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 に設定します。
       region: 'yourRegion',
       authorizationV4: true,
       // Security Token Service (STS) から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // STS から取得したセキュリティトークン (SecurityToken)。
       stsToken: 'yourSecurityToken',
       // バケット名を指定します。 例：examplebucket。
       bucket: "examplebucket",
     });

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

    // アップロードするファイルの内容を指定します。
    const file = new Blob(['examplecontent'])
    // バケットにアップロードするオブジェクトの名前を指定します。
    const fileName = 'exampleobject.txt'

    // ファイルをアップロードします。
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // カスタムメタデータを指定します。 1 つのファイルに複数のメタデータエントリを設定できますが、合計サイズは 8 KB を超えることはできません。
        meta: {
          year: 2020,
          people: '田中'
        }
      }).then(r => console.log(r))
    })

    // メタデータを更新します。
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        year: 2021,
        people: '鈴木'
      }
      ).then(r => {
        console.log(r)
      })
    })
    // メタデータを表示します。
    check.addEventListener('click', () => {
      // 上記のコードで設定されたメタデータに基づき、バケットのクロスオリジンルール内の ExposeHeaders 設定項目に x-oss-meta-year を追加します。 そうしないと、コンソールに出力されるメタデータは null になります。
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

Object Storage Service:ファイルメタデータの管理 (Browser.js SDK)

注意事項

サンプルコード

関連ドキュメント