OSS刷新浏览器断点续传功能实现

文档地址: https://help.aliyun.com/document_detail/383953.html?spm=a2c4g.383947.0.0.47607d9dnkBjdG
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<input type="file" id="file">
<span id="process"></span>
<button id="submit">断点上传</button>
<!--导入SDK文件-->
<script
        type="text/javascript"
        src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"
></script>
<script type="text/javascript">
    // 多文件上传要用多个 client
    const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填写Bucket名称，例如examplebucket。
        bucket: "examplebucket",
    });

    // 定义中断点。
    let abortCheckpoint;
    // 获取上传和中断DOM。
    let uploadFile;
    const process = document.getElementById("process");
    const file = document.getElementById("file");
    const submit = document.getElementById("submit");

    // 选择文件之后
    file.addEventListener('change', function () {
        uploadFile = this.files[0];
        // 设置唯一的 ID, 可以用名字加大小, 最好用 md5 值
        uploadFile.id = '' + uploadFile.size + uploadFile.name;
        uploadFile.checkpoint = getData(uploadFile);

        // 获取进度条
        if (uploadFile.checkpoint) {
            process.innerText = uploadFile.checkpoint.process + '%';
        } else {
            process.innerText = '无续传内容';
        }
    });


    // 监听上传按钮，单击后“上传“后开始上传。
    submit.addEventListener("click", function () {

        if (!uploadFile) {
            alert('未选择文件');
            return;
        }

        let filename = uploadFile.id;
        let checkpointData = uploadFile.checkpoint;
        // 如果有断点
        if (checkpointData) {
            if (checkpointData.process === 100) {
                // 已经上传完毕, 提交后台处理
                // deleteData(uploadFile);
                return;
            }
            // 这里一定要赋值
            checkpointData.file = uploadFile;
        }

        // 名字保持一致
        client
            .multipartUpload(filename, uploadFile, {
                progress: (p, checkpoint, res) => {

                    let processVal = Math.round(p * 100);
                    process.innerText = processVal + ' %';
                    // 进度条。
                    checkpoint.process = processVal;
                    setData(uploadFile, checkpoint);
                },
                // 100k 分片, 方便观察
                partSize: 1024 * 100,
                checkpoint: checkpointData,
            })
            .then(function (r) {
                console.log(r);
                // 已经上传完毕, 提交后台处理
                deleteData(uploadFile);
            });
    });


    function getData(file) {
        let data = JSON.parse(window.localStorage.getItem(file.id));
        if (!data) {
            return null;
        }

        data.file = file;
        return data;
    }

    function setData(file, checkpoint) {

        // 这里需要覆盖 file, 无法序列化
        // 这里一定要重新创建对象, file 不可序列化
        // 防止引用
        let data = JSON.stringify({
            file: null,
            name: checkpoint.name,
            fileSize: checkpoint.fileSize,
            partSize: checkpoint.partSize,
            uploadId: checkpoint.uploadId,
            doneParts: checkpoint.doneParts,
            process: checkpoint.process
        });
        window.localStorage.setItem(file.id, data);
    }

    function deleteData(file) {
        window.localStorage.removeItem(file.id);
    }
</script>
</body>
</html>