Cette rubrique explique comment appeler l'opération PutObject pour charger des fichiers, des données BLOB ou des tampons vers Object Storage Service (OSS). Les fonctions de suivi de progression ne sont pas prises en charge pour les téléchargements simples.
Prérequis
Le SDK OSS pour Browser.js est installé. Pour plus d'informations, consultez la section Installation.
Notes d'utilisation
Lorsque vous utilisez des outils d'empaquetage tels que Webpack et Browserify, installez le SDK OSS pour Browser.js en exécutant la commande npm install ali-oss.
Si vous souhaitez accéder à un bucket OSS depuis un navigateur sans avoir configuré de règles CORS pour ce bucket, le navigateur rejettera la requête. Vous devez donc configurer des règles CORS pour le bucket afin d'y accéder depuis un navigateur. Pour plus d'informations, consultez la section Installation.
-
Le SDK OSS pour Browser.js s'exécute principalement dans les navigateurs. Afin d'éviter l'exposition de votre paire de clés AccessKey, nous vous recommandons d'utiliser des identifiants d'accès temporaires obtenus via Security Token Service (STS) pour accéder à OSS.
Les identifiants d'accès temporaires se composent d'une paire de clés AccessKey et d'un jeton de sécurité. La paire de clés AccessKey comprend un AccessKey ID et un AccessKey Secret. Pour savoir comment obtenir des identifiants d'accès temporaires, consultez la section Utilisation de STS pour l'autorisation d'accès temporaire.
Autorisations
Par défaut, un compte Alibaba Cloud dispose de toutes les autorisations. Les utilisateurs RAM ou les rôles RAM associés à un compte Alibaba Cloud ne disposent d'aucune autorisation par défaut. Le compte Alibaba Cloud ou l'administrateur du compte doit accorder les autorisations d'opération via des stratégies RAM ou une stratégie de bucket.
|
API |
Action |
Description |
|
PutObject |
|
Charge un objet. |
|
|
Requis si vous spécifiez des tags d'objet à l'aide de l'en-tête |
|
|
|
Requis si l'en-tête |
|
|
|
Exemple de code
BLOB (Binary Large Object) désigne un grand objet binaire.
Le code suivant illustre le chargement de données vers un objet nommé exampleobject.txt situé dans le répertoire exampledir du 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
Puis-je obtenir la progression du chargement pour un téléchargement simple ?
Non. Le suivi de la progression du chargement est disponible uniquement pour le téléchargement multipartie (SDK Browser.js) et le téléchargement avec reprise (SDK Browser.js).
Références
Pour consulter l'exemple de code complet relatif au téléchargement simple, rendez-vous sur la page GitHub example.
Pour plus d'informations sur l'opération API de téléchargement simple, consultez la section PutObject.