MuGuiLin
diff --git a/‎File文件/大文件分片/index.html‎
Lines changed: 84 additions & 3 deletions b/‎File文件/大文件分片/index.html‎
Lines changed: 84 additions & 3 deletions
@@ -9,13 +9,25 @@
         h1 {
             text-align: center;
         }
+
+        .box {
+            margin: 20px;
+            font-size: 32px;
+        }
     </style>
 </head>
 
 <body>
     <h1>大文件分片（普通版）</h1>
     <hr />
-    <input type="file" id="file" />
+    <div class="box">
+        md5：<input type="file" id="file" />
+        <h3 id="chunks"></h3>
+    </div>
+    <div class="box">
+        spark-md5：<input type="file" id="file2" />
+        <h3 id="chunks2"></h3>
+    </div>
 
     <script src="./md5.js"></script>
     <script>
@@ -51,7 +63,7 @@ <h1>大文件分片（普通版）</h1>
                 // fileReader.onprogress = (e) => {
                 //     console.log('切片进度：', e);
                 // };
-                
+
                 //  开始读取指定 Blob 或 File 的内容（读取操作完成时，readyState 属性变为 DONE，并触发 loadend 事件）
                 fileReader.readAsArrayBuffer(blob);
             })
@@ -70,6 +82,13 @@ <h1>大文件分片（普通版）</h1>
                     end,
                     index,
                     hash: md5(index),
+                    /*
+                        在前端进行大文件上传时，计算文件的哈希值通常是为了确保文件的完整性和唯一性。
+                        使用循环时的索引（index）来计算哈希值并不是一个合适的方法，
+                        因为索引只是一个循环变量，并不能反映文件内容的实际信息。
+                        在计算哈希值时，应该使用文件内容的实际信息，而不是索引来计算哈希值。
+                        所以 可以用 spark-md5
+                    */
                     blob,
                 });
             })
@@ -110,11 +129,73 @@ <h1>大文件分片（普通版）</h1>
             console.time('耗时');
 
             const chunks = await cutFile(file);
-            console.timeEnd('耗时');
+            document.querySelector('#chunks').innerText = chunks
 
             console.log('分片结果：', chunks);
         }
     </script>
+
+    <script src="./spark-md5.js"></script>
+    <script type="module">
+        // 引入spark-md5库
+        // import { SparkMD5 } from './spark-md5.js';
+
+        function calculateFileHash(file) {
+            return new Promise((resolve, reject) => {
+                const spark = new SparkMD5.ArrayBuffer();
+                const fileReader = new FileReader();
+                /*
+                SparkMD5 是 MD5 算法的快速 md5 实现。此脚本基于 JKM md5 库，这是最快的算法。这最适合浏览器使用
+                */
+                fileReader.onload = (e) => {
+                    spark.append(e.target.result); // Append array buffer
+                    resolve(spark.end());
+                };
+
+                fileReader.onerror = () => {
+                    reject('无法读取文件');
+                };
+
+                fileReader.readAsArrayBuffer(file);
+            });
+        }
+
+        // 定义文件每片的分片大小 5MB
+        const CHUNK_SIZE2 = 1024 * 1024 * 5;
+
+        const cutFile2 = async (file) => {
+
+            // 计算文件总分片数
+            const chunkCount = Math.ceil(file.size / CHUNK_SIZE); // 分片向上取整，如：5.5片就要分6片
+            console.log('文件总分片数：', chunkCount);
+
+            console.log('\n文件分片中...！🚀如果文件是存储SSD固态硬盘中的话，读取速度会有非常大的提升哦！！\n\n');
+
+            const chunks = [];
+            // 获取文件分片每片的信息
+            for (let i = 0; i < chunkCount; i++) {
+                chunks.push(calculateFileHash(file, i, CHUNK_SIZE))
+            }
+            // return chunks;
+            // 最后用Promise并行创建分片
+            return await Promise.all(chunks);
+
+            // 通过以上的尝试最后速度效果都差不多, 所以可以尝试用多线程worker的方式来处理。
+        };
+
+        // 使用示例
+        document.querySelector('#file2').addEventListener('change', async (e) => {
+
+            const file = e.target.files[0];
+            console.time('耗时');
+
+            const chunks = await cutFile2(file);
+            document.querySelector('#chunks2').innerText = chunks
+
+            console.log('分片结果：', chunks);
+
+        });
+    </script>
 </body>
 
 </html>