Este tópico descreve como chamar a operação PutObject para fazer upload de arquivos, dados BLOB ou buffers no Object Storage Service (OSS). Funções de progresso não estão disponíveis para uploads simples.
Pré-requisitos
Instale o OSS SDK for Browser.js. Para mais informações, consulte Instalação.
Observações de uso
Ao usar ferramentas de empacotamento como Webpack e Browserify, instale o OSS SDK for Browser.js executando o comando npm install ali-oss.
Se você tentar acessar um bucket do OSS pelo navegador sem regras CORS configuradas, o navegador rejeitará a solicitação. Portanto, configure as regras CORS no bucket antes de acessá-lo via navegador. Para mais detalhes, consulte Instalação.
-
O OSS SDK for Browser.js geralmente é executado diretamente no navegador. Para evitar a exposição do seu par de AccessKey, use credenciais de acesso temporárias obtidas por meio do Security Token Service (STS) para acessar o OSS.
Essas credenciais temporárias incluem um par de AccessKey e um token de segurança. O par de AccessKey consiste em um AccessKey ID e um AccessKey secret. Para saber como obter credenciais de acesso temporárias, consulte Usar STS para autorização de acesso temporário.
Permissões
Por padrão, uma conta Alibaba Cloud tem permissões totais. Usuários RAM ou funções RAM vinculados a essa conta não têm permissão inicialmente. A conta Alibaba Cloud ou o administrador da conta deve conceder as permissões operacionais necessárias por meio de políticas RAM ou Bucket Policy.
|
API |
Ação |
Descrição |
|
PutObject |
|
Faz o upload de um objeto. |
|
|
Necessária ao especificar tags de objeto com o cabeçalho |
|
|
|
Necessária se o cabeçalho |
|
|
|
Código de exemplo
BLOB (Binary Large Object) refere-se a um objeto binário grande.
O código a seguir exemplifica como fazer upload de dados para um objeto chamado exampleobject.txt, localizado 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>
Perguntas frequentes
É possível acompanhar o progresso de um upload simples?
Não. O acompanhamento de progresso está disponível apenas para upload multipartido (Browser.js SDK) e upload retomável (Browser.js SDK).
Referências
Para obter o código completo de exemplo de upload simples, consulte o exemplo no GitHub.
Para mais detalhes sobre a operação de API de upload simples, consulte PutObject.