How to use OSS SDK for Browser.js to preview and download an object - Object Storage Service

Bir nesneyi indirmek veya önizlemek üzere URL oluşturmak amacıyla tarayıcıda signatureUrl yöntemini kullanabilirsiniz. Nesnenin URL'sini almak için <a> HTML öğesinin download özniteliğini veya window.open API'sini kullanabilirsiniz.

Kullanım notları

Webpack ve Browserify gibi paketleme araçlarını kullandığınızda, npm install ali-oss komutunu çalıştırarak Browser.js için OSS SDK'yı yükleyin.
Tarayıcıdan bir OSS paketine erişmek istiyorsanız ancak paket için CORS kuralları yapılandırılmamışsa tarayıcı isteği reddeder. Bu nedenle, bir pakete tarayıcıdan erişmek istiyorsanız paket için CORS kurallarını yapılandırmanız gerekir. Daha fazla bilgi için bkz. Installation.
Browser.js için OSS SDK çoğunlukla tarayıcılarda kullanılır. AccessKey çiftinizin açığa çıkmasını önlemek için OSS'a erişirken Security Token Service (STS) üzerinden alınan geçici erişim kimlik bilgilerini kullanmanızı öneririz.

Geçici erişim kimlik bilgileri bir AccessKey çifti ve bir güvenlik belirtecinden oluşur. AccessKey çifti bir AccessKey ID ve bir AccessKey Secret içerir. Geçici erişim kimlik bilgilerini nasıl alacağınız hakkında daha fazla bilgi için bkz. Use STS for temporary access authorization.

Önizleme için bir nesnenin URL'sini alın

Aşağıdaki kod, examplebucket adlı bir paketteki exampleobject.txt adlı bir nesnenin önizleme URL'sinin nasıl alınacağını göstermektedir.

Not

Bir nesneyi tarayıcıda önizlemek için Content-Disposition değerini inline olarak ayarlayın ve nesneye erişmek için paketle eşlenen özel alan adını kullanın. Daha fazla bilgi için bkz. Configure object metadata ve Use a custom domain name (Browser.js SDK).

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

  <body>
    <!-- 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 STS. 
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // Specify the security token obtained from STS. 
        stsToken: "yoursecurityToken",
        // Specify the name of the bucket. 
        bucket: "examplebucket",
      });
      
      // Specify the full path of the object. Do not include the bucket name in the full path. 
      const url = client.signatureUrl("example.jpg", {
        // If you want to add an image style to the generated signed URL, you can use the process parameter to specify the style in the "style/image style name" format. 
        // process: "style/imagestyle",
      });
      console.log(url);

      // Specify the validity period of a signed URL. Unit: seconds. If you do not specify the validity period, the signed URL is valid for 1800 seconds. 
      // url = client.signatureUrl('example.jpg', {expires: 3600});
      // console.log(url);
    </script>
  </body>
</html>

Bir nesneyi indirmek için URL'yi alın

Aşağıdaki kod, examplebucket adlı bir paketteki exampleobject.txt adlı bir nesneyi indirmek için URL'nin nasıl alınacağını göstermektedir. Varsayılan olarak URL'nin geçerlilik süresi 1.800 saniyedir.

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

  <body>
    <!-- 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 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. 
        bucket: "examplebucket",
      });

      // Set the response header to automatically download an object by using the URL, and set the name of the local file after the object is downloaded. 
      const filename = "examplefile.txt";
      const response = {
        "content-disposition": `attachment; filename=${encodeURIComponent(
          filename
        )}`,
      };
      // Specify the full path of the object. Do not include the bucket name in the full path. 
      const url = client.signatureUrl("exampleobject.txt", { response });
      console.log(url);
    </script>
  </body>
</html>