通过断点续传上传的方式将文件上传到OSS前,您可以指定断点记录点。上传过程中,如果出现网络异常或程序崩溃导致文件上传失败时,将从断点记录处继续上传未上传完成的部分。
attention:
1、
当您使用webpack或browserify等打包工具时,请通过npm install ali-oss的方式安装Browser.js SDK。
通过浏览器访问OSS时涉及跨域请求,如果未设置跨域规则,浏览器会拒绝跨域访问请求。如果您希望通过浏览器可以正常访问OSS,需要通过OSS设置跨域规则。具体操作,请参见【准备工作】。
由于Browser.js SDK通常在浏览器环境下使用,为避免暴露阿里云账号访问密钥(AccessKey ID和AccessKey Secret),强烈建议您使用临时访问凭证的方式执行OSS相关操作。
临时访问凭证包括临时访问密钥(AccessKey ID和AccessKey Secret)和安全令牌(SecurityToken)。获取临时访问凭证的具体操作,请参见【授权访问】
示例:以下代码用于断点续传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <button id="submit">上传</button> <button id="pause">暂停</button> <button id="resume">恢复上传</button> <!--导入SDK文件--> <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({ // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。 region: 'yourRegion', authorizationV4: true, // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 从STS服务获取的安全令牌(SecurityToken)。 stsToken: 'yourSecurityToken', // 填写Bucket名称,例如examplebucket。 bucket: "examplebucket", }); // 生成用于断点续传上传的文件,大小为100 MB。 const fileContent = Array(1024 * 1024 * 100) .fill("a") .join(""); const file = new File([fileContent], "multipart-upload-file"); // 上传至Bucket内Object的完整路径,例如exampledir/exampleobject.txt。 const name = "test.txt"; // 定义中断点。 let abortCheckpoint; // 获取上传和中断DOM。 const submit = document.getElementById("submit"); const pause = document.getElementById("pause"); // 获取续传DOM。 const resume = document.getElementById("resume"); // 监听上传按钮,单击后“上传“后开始上传。 submit.addEventListener("click", () => { client .multipartUpload(name, file, { progress: (p, cpt, res) => { // 为中断点赋值。 abortCheckpoint = cpt; console.log(abortCheckpoint); // 获取上传进度。 console.log(p * 100); }, }) .then((r) => console.log(r)); }); // 监听暂停按钮。 pause.addEventListener("click", () => { // 暂停上传。 client.cancel(); }); const resumeUpload = async () => { // 设置重试次数为五次。 try { const result = await client.multipartUpload(name, file, { checkpoint: abortCheckpoint, progress: (p, cpt, res) => { // 为了实现断点上传,您可以在上传过程中保存断点信息(checkpoint)。发生上传错误后,将已保存的checkpoint作为参数传递给multipartUpload,此时将从上次上传失败的地方继续上传。 abortCheckpoint = cpt; // 获取上传进度。 console.log(p); }, }); console.log(result); } catch (e) { console.log(e); } }; // 监听续传按钮,单击”恢复上传“后继续上传。 resume.addEventListener("click", async () => { await resumeUpload(); }); </script> </body> </html>
相关文档:关于断点续传上传的完整示例代码,请参见GitHub示例