文件分片(代码片段)

最新推荐文章于 2024-09-25 14:00:00 发布

一只前端旺

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量80

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/myrook/article/details/140939895

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="文件上传" id="fileBtn">
    <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
    <script>
        const fileChunkSize = 10 * 1024 * 1024 //10MB
        const fileInput = document.getElementById('fileBtn')
        fileInput.onchange = async (e) => {
            //获取到文件
            const file = e.target.files[0]
            if (!file) {
                return
            }
            //获取文件分片
            const chunks = createChunk(file, fileChunkSize)
            //计算hash (可用Web Workers 计算)
            const result = await hash(chunks)
            console.log(result)
        }

        //创建切片
        function createChunk(file, chunkSize) {
            const reslut = []
            for (let i = 0; i < file.size; i += chunkSize) {
                reslut.push(file.slice(i, i + chunkSize))
            }
            return reslut
        }

        //计算md5值
        function hash(chunks) {
            return new Promise(resolve => {
                const spark = new SparkMD5()
                function _read(i) {
                    if (i >= chunks.length) {
                        //spark.end() 结束
                        resolve(spark.end())
                        return
                    }
                    //单个分片
                    const blob = chunks[i]
                    //创建FileReader对象
                    const reader = new FileReader()
                    //来自于MDN介绍
                    //FileReader 接口的 readAsArrayBuffer() 方法用于开始读取指定 Blob 或 File 的内容。当读取操作完成时，
                    //readyState 属性变为 DONE，并触发 loadend 事件。此时，result 属性包含一个表示文件数据的 ArrayBuffer。
                    reader.readAsArrayBuffer(blob)
                    reader.onload = e => {
                        const bytes = e.target.result //读取到的字节
                        //来自于https://github.com/satazor/js-spark-md5
                        //加入到其中计算
                        spark.append(bytes)
                        _read(i + 1)
                    }
                }
                _read(0)
            })
        }
    </script>
</body>

</html>