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">

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

<body>
  <button id='upload'>Upload</button>
  <button id='update'> Modify Object Metadata </button>
  <button id='check'> Query Object Metadata </button>
    <!-- Import the SDK file -->
  <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({
       // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
       region: 'yourRegion',
       authorizationV4: true,
       // Specify the temporary AccessKey pair obtained from Security Token Service (STS). The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // Specify the security token obtained from STS. 
       stsToken: 'yourSecurityToken',
       // Specify the name of the bucket. Example: examplebucket. 
       bucket: "examplebucket",
     });

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

    // Specify the content of the object to upload. 
    const file = new Blob(['examplecontent'])
    // Specify the name of the object to upload to the bucket. 
    const fileName = 'exampleobject.txt'

    // Upload the object. 
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // Specify user metadata. You can configure multiple sets of metadata for an object. Take note that all the metadata cannot exceed 8 KB in size. 
        meta: {
          year: 2020,
          people: 'eliot'
        }
      }).then(r => console.log(r))
    })

    // Modify the object metadata. 
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        year: 2021,
        people: 'evan'
      }
      ).then(r => {
        console.log(r)
      })
    })
    // Query the object metadata. 
    check.addEventListener('click', () => {
      // Add x-oss-meta-year to the Exposed Headers field in the CORS rule of the bucket based on the preceding metadata. Otherwise, the metadata displayed in the console is null. 
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

Object Storage Service:OSS SDK for Brower.jsを使用したオブジェクトメタデータの管理

使用上の注意

サンプルコード

関連ドキュメント