Object Storage Service:Simple upload (Browser.js SDK)

Pré-requisitos

O OSS SDK para Browser.js está instalado. Para obter mais informações, consulte Installation.

Observações de uso

• Ao usar ferramentas de empacotamento como Webpack e Browserify, instale o OSS SDK para Browser.js executando o comando npm install ali-oss.

• Se você quiser acessar um bucket OSS a partir de um navegador sem regras de CORS configuradas, o navegador rejeitará a solicitação. Portanto, configure regras de CORS para o bucket antes de acessá-lo pelo navegador. Para obter mais informações, consulte Installation.

• Na maioria dos casos, o OSS SDK para Browser.js é usado em navegadores. Para evitar a exposição do seu par de AccessKey, recomendamos usar credenciais de acesso temporário obtidas do Security Token Service (STS) para acessar o OSS.

  As credenciais de acesso temporário consistem em um par de AccessKey e um token de segurança. O par de AccessKey é composto por um AccessKey ID e um AccessKey secret. Para obter mais informações sobre como obter credenciais de acesso temporário, consulte Use STS for temporary access authorization.

Permissões

Por padrão, uma conta Alibaba Cloud tem permissões completas. Usuários RAM ou perfis RAM vinculados a uma conta Alibaba Cloud não têm nenhuma permissão por padrão. A conta Alibaba Cloud ou o administrador da conta deve conceder permissões de operação por meio de RAM policies ou Bucket Policy.

Sample Code

O código a seguir apresenta um exemplo de como fazer upload de dados para um objeto chamado exampleobject.txt no diretório exampledir do bucket examplebucket:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="upload">Upload an Object</button>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script>
      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 that you obtained from STS. 
        stsToken: "yourSecurityToken",
        // Specify the name of the bucket. 
        bucket: "examplebucket",
      });

      // Select the local file from the drop-down list. Example: <input type="file" id="file" />. 
      let data;
      // Create and specify the Blob data. 
      //const data = new Blob(['Hello OSS']);
      // Create an OSS buffer and specify the content of the OSS buffer. 
      //const data = new OSS.Buffer(['Hello OSS']);

      const upload = document.getElementById("upload");

      async function putObject(data) {
        try {
          // Specify the full path of the object. Do not include the bucket name in the full path. 
          // Specify the object name or the full path of the object to upload data to the current bucket or a specific directory in the bucket. For example, set the object name to exampleobject.txt or the path of the object to exampledir/exampleobject.txt. 
          // You can set the data to files, Blob data, or OSS buffers. 
          const options = {
            meta: { temp: "demo" },
            mime: "json",
            headers: { "Content-Type": "text/plain" },
          };
          const result = await client.put("examplefile.txt", data, options);
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      upload.addEventListener("click", () => {
        const data = file.files[0];
        putObject(data);
      });
    </script>
  </body>
</html>

FAQ

É possível obter o progresso de upload em um upload simples?

Não. O progresso de upload está disponível apenas para multipart upload (Browser.js SDK) e resumable upload (Browser.js SDK).

Referências

• Para acessar o código de exemplo completo de um upload simples, consulte o exemplo no GitHub.

• Para obter mais informações sobre a operação de API de upload simples, consulte PutObject.