大文件切片上传

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片上传</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
<input type="file">

<script>
    const inp = document.querySelector('input');
    inp.onchange = async (ev) => {
        const file = inp.files[0];
        if (!file) {
            return;
        }
        const chunks = createChunks(file, 10 * 1024 * 1024);
        const result = await hash(chunks);
        console.log(result);
        console.log(chunks);
    }

    function hash(chunks) {
        return new Promise(resolve => {
            const spark = new SparkMD5();

            function _read(i) {
                if (i >= chunks.length) {
                    resolve(spark.end());
                    return; // 读取完成
                }
                const blob = chunks[i];
                const reader = new FileReader();
                reader.onload = ev => {
                    const bytes = ev.target.result; // 读取到的字节数组
                    spark.append(bytes);
                    _read(i + 1)
                }
                reader.readAsArrayBuffer(blob);
            }

            _read(0);
        })

    }

    function createChunks(file, chunkSize) {
        const result = [];
        for (let i = 0; i < file.size; i += chunkSize) {
            result.push(file.slice(i, i + chunkSize))
        }
        return result;
    }
</script>
</body>
</html>

　　

posted @ 2023-05-29 11:40  PromiseOne  阅读(39)  评论(0)    收藏  举报