前端大文件上传（一篇文章搞定）

web网页精选

已于 2024-09-30 13:50:06 修改

阅读量260

点赞数 4

文章标签：前端

于 2024-09-30 13:49:53 首次发布

本文链接：https://blog.csdn.net/qq_43770056/article/details/142652751

版权

前言：上传文件一旦过大，如果一次发送的话，那么请求的时间就会非常的长，一旦请求的过程中出现一些问题，比如网络断开，不得不把文件重新上传一遍，非常麻烦且浪费资源，所以在做大文件上传的时候往往要对大文件进行分片，在客户端首先把整个大文件数据分成一个个的数据小块，可以把每一个小块想象成一个单独的小文件，然后利用单文件上传，把这些小文件依次上传到服务器，当最后把文件全部传输完成后，在服务器端使用程序，把整个文件的小数据组装起来，形成一个完整的文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大文件上传</title>
</head>

<body>
    <!-- 引入 spark-md5 用来计算出文件的 hash 值 传给服务器用于鉴别文件 -->
     <!-- 因为文件过大，需要很长时间才能计算出hash值，因此实际开发中运算过程不会放在主线程中,颗粒利用web worker 单独开一个线程来处理,避免浏览器卡死  -->
      <!-- 单独放到一个线程中,还是有可能会导致卡顿,因为他是一个CPU特别密集的任务 -->
       <!-- 在类似b站的网站会这样处理： 当发现文件特别大的时候先粗略对文件分成一些大块，然后慢慢计算小块 -->
    <script src="./spark-md5.js"></script>
    <input type="file" />
    <script>
        const inp = document.querySelector('input');
        inp.onchange = async (e) => {
            const file = e.target.files[0]; // 使用 e.target 修正 this 指向问题
            if (!file) {
                return;
            }
            const chunks = createChunks(file, 10 * 1024 * 1024);
            const result = await hash(chunks);
            console.log("文件的 MD5 哈希值:", result); // 输出结果
        }

        // 得到文件的 hash 因为文件很大不能全部读取才计算hash 需要分块算法 增量算法
        function hash(chunks) {
            return new Promise((resolve, reject) => {
                if (typeof SparkMD5 === 'undefined') { // 检查 SparkMD5 是否已定义
                    reject(new Error('SparkMD5 未加载'));
                    return;
                }
                const spark = new SparkMD5.ArrayBuffer(); // 使用 ArrayBuffer 方式
                function _read(i) {
                    if (i >= chunks.length) {
                        resolve(spark.end());
                        return; // 读取完成
                    }
                    const blob = chunks[i];
                    const reader = new FileReader();
                    reader.onload = e => {
                        const bytes = e.target.result; // 读取到字节数组
                        spark.append(bytes);
                        _read(i + 1);
                    };
                    reader.readAsArrayBuffer(blob); // 使用 readAsArrayBuffer
                }
                _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>