原生JS上传大文件分片
上传大文件分片是一种常见的上传方式,可以有效地避免上传过程中出现网络中断等问题导致的上传失败。下面是一个使用原生JS实现上传大文件分片的示例代码:
javascript // 定义上传文件的分片大小 const CHUNK_SIZE = 1024 * 1024; // 1MB // 获取文件的MD5值 function getFileMD5(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const spark = new SparkMD5.ArrayBuffer(); spark.append(reader.result); const md5 = spark.end(); resolve(md5); }; reader.onerror = reject; reader.readAsArrayBuffer(file); }); } // 分片上传文件 async function uploadFile(file) { const fileSize = file.size; const fileMD5 = await getFileMD5(file); const totalChunks = Math.ceil(fileSize / CHUNK_SIZE); let uploadedChunks = 0; let uploadedSize = 0; while (uploadedChunks < totalChunks) { const start = uploadedChunks * CHUNK_SIZE; const end = Math.min(start + CHUNK_SIZE, fileSize); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('fileMD5', fileMD5); formData.append('chunkIndex', uploadedChunks); formData.append('totalChunks', totalChunks); const response = await fetch('/upload', { method: 'POST', body: formData, }); const result = await response.json(); if (result.success) { uploadedChunks++; uploadedSize += chunk.size; const progress = Math.floor((uploadedSize / fileSize) * 100); console.log(`Uploaded ${progress}%`); } else { console.error(result.message); } } console.log('Upload complete!'); }
上述代码中,我们首先定义了上传文件的分片大小为1MB,然后使用SparkMD5库计算文件的MD5值。接着,我们根据文件大小和分片大小计算出需要上传的总分片数,并在循环中逐个上传每个分片。在上传每个分片时,我们使用FormData对象将分片数据和其他参数一起发送到服务器端。上传成功后,我们更新已上传的分片数和已上传的文件大小,并计算上传进度。最后,当所有分片上传完成时,我们输出上传完成的消息。
需要注意的是,上述代码中的上传接口地址为`/upload`,需要根据实际情况进行修改。另外,由于分片上传涉及到文件的MD5值计算和网络请求等操作,因此建议使用异步函数或Promise等方式进行处理,以避免阻塞UI线程。
参考文章:http://blog.ncmem.com/wordpress/2023/11/14/%e5%8e%9f%e7%94%9fjs%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87-2/
欢迎入群一起讨论