Le téléchargement avec reprise vous permet de définir un point de contrôle avant de transférer un fichier vers OSS. Si le transfert est interrompu par une erreur réseau ou un plantage du programme, il reprend à partir de ce point de contrôle.
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 compartiment OSS depuis un navigateur sans avoir configuré de règles CORS, le navigateur rejette la requête. Vous devez donc configurer des règles CORS pour le compartiment afin d'y accéder depuis un navigateur. Pour plus d'informations, consultez la section Installation.
-
Le SDK OSS pour Browser.js s'utilise principalement dans les navigateurs. Pour éviter d'exposer votre paire de clés AccessKey, nous vous recommandons d'utiliser des identifiants d'accès temporaires obtenus via le 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 rubrique Utilisation du STS pour l'autorisation d'accès temporaire.
Exemple de code
Le code 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 example.