Le téléchargement avec reprise permet de définir un point de contrôle avant d'envoyer un fichier vers OSS. En cas d'interruption due à une erreur réseau ou à un plantage du programme, l'envoi reprend à partir de ce point.
Remarques d'utilisation
Si 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 aucune règle CORS n'est configurée pour le bucket, le navigateur rejette toute tentative d'accès depuis celui-ci. Vous devez donc configurer des règles CORS pour permettre l'accès au bucket via un navigateur. Pour plus d'informations, consultez la rubrique Installation.
-
Le SDK OSS pour Browser.js s'exécute principalement dans les navigateurs. Pour éviter d'exposer votre paire de clés AccessKey, nous vous recommandons d'utiliser des identifiants temporaires obtenus via Security Token Service (STS) pour accéder à OSS.
Ces identifiants temporaires comprennent une paire de clés AccessKey (AccessKey ID et AccessKey Secret) ainsi qu'un jeton de sécurité. Pour savoir comment obtenir ces identifiants, consultez la rubrique Utilisation de STS pour l'autorisation d'accès temporaire.
Exemple de code
L'exemple suivant illustre un téléchargement avec reprise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">Upload</button>
<button id="pause">Pause</button>
<button id="resume">Resume Upload</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({
// Set yourRegion to the region where the bucket is located. For example, if the region is China (Hangzhou), set yourRegion to oss-cn-hangzhou.
region: 'yourRegion',
authorizationV4: true,
// The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from Security Token Service (STS).
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// The security token (SecurityToken) obtained from STS.
stsToken: 'yourSecurityToken',
// Specify the bucket name, for example, examplebucket.
bucket: "examplebucket",
});
// Generate a 100 MB file for the resumable upload.
const fileContent = Array(1024 * 1024 * 100)
.fill("a")
.join("");
const file = new File([fileContent], "multipart-upload-file");
// The full path of the object. Example: exampledir/exampleobject.txt.
const name = "test.txt";
// Define the checkpoint.
let abortCheckpoint;
// Get the upload and pause DOM elements.
const submit = document.getElementById("submit");
const pause = document.getElementById("pause");
// Get the resume DOM element.
const resume = document.getElementById("resume");
// Add a listener to the upload button. The upload starts when you click Upload.
submit.addEventListener("click", () => {
client
.multipartUpload(name, file, {
progress: (p, cpt, res) => {
// Assign a value to the checkpoint.
abortCheckpoint = cpt;
console.log(abortCheckpoint);
// Obtain the upload progress.
console.log(p * 100);
},
})
.then((r) => console.log(r));
});
// Add a listener to the pause button.
pause.addEventListener("click", () => {
// Pause the upload.
client.cancel();
});
const resumeUpload = async () => {
// Set the number of retries to five.
try {
const result = await client.multipartUpload(name, file, {
checkpoint: abortCheckpoint,
progress: (p, cpt, res) => {
// To implement resumable upload, you can save the checkpoint information during the upload. If an upload error occurs, pass the saved checkpoint as a parameter to multipartUpload. The upload then resumes from the point of the last failure.
abortCheckpoint = cpt;
// Obtain the upload progress.
console.log(p);
},
});
console.log(result);
} catch (e) {
console.log(e);
}
};
// Add a listener to the resume button. The upload continues when you click Resume Upload.
resume.addEventListener("click", async () => {
await resumeUpload();
});
</script>
</body>
</html>
Références
Pour consulter l'exemple de code complet relatif aux téléchargements avec reprise, rendez-vous sur la page GitHub.