JavaScript 如何做大文件上传

打开网页时，你有没有遇到过这样的情况：想传个几G的备份视频，结果要么传一半断了，要么得一直盯着进度条不敢切页面？其实不用愁，前端JavaScript就能帮我们搞定大文件上传的难题，而且操作起来和传普通照片差不多简单。

先搞懂大文件上传的“小麻烦”

为什么几G的文件传起来这么费劲？普通的文件上传是把整个文件一次性发给服务器，就像拎着一整袋大米爬五楼，很容易累到半路掉链子。而且一旦断网，就得重新来过，谁也不想传了10G的文件，最后因为断网白忙活。

JavaScript的优势就在于，它能帮我们把“整袋大米”拆成一小份一小份的“米团”，每次只送一小份，就算断了，下次只需要补传没送完的那几小份就行，不用从头再来。

用“分片上传”解决大文件的核心问题

分片上传就是把大文件切成固定大小的“数据块”，比如每个块1MB或者2MB，然后一个个发给服务器。举个例子，就像把大蛋糕切成小块，每次只送一块，服务器收到后再把所有小块拼回原来的蛋糕。

具体到代码里，用JavaScript的File API就能实现：先拿到用户选择的文件，然后用slice()方法把文件切成小块，再用循环把每个块依次发给服务器。比如传一个4G的视频，切成2MB的块后，就有2000个小块，就算某次传的时候断了，下次只需要从上次没传完的那个小块继续，不用重新切、重新传。

解决“重复传”和“拼文件”的细节问题

分片上传还有两个容易踩的坑，得提前避开。第一个是“重复传同一个块”，比如网络慢的时候，同一个小块可能会被发好几次，服务器就会存很多重复的块。解决方法是给每个小块加个唯一的标识，比如把文件名、文件大小、当前块的序号拼起来做个标记，服务器收到后先查一下有没有这个标记，有就直接跳过，没有再保存。

第二个是“服务器怎么把小块拼成大文件”，当所有小块都传完后，得告诉服务器“所有块都齐了，帮我拼一下”。这时候JavaScript可以发一条“合并请求”，把所有小块的标识发给服务器，服务器按照块的序号把它们拼起来，就能得到完整的大文件了。

补充两个实用的小技巧

除了分片，还有两个小技巧能让大文件上传更顺手。一个是“暂停和续传”，用户传一半想暂停，JavaScript可以把当前传完的块序号存到本地，下次打开页面，直接从这个序号开始传，不用重新切文件。另一个是“压缩文件”，如果传的是图片或视频，可以用JavaScript的压缩工具先把文件体积变小，比如把10MB的照片压到2MB，传起来更快，而且画质也不会差太多。

总结

JavaScript做大文件上传，核心就是把“大文件”拆成“小分片”，再一个个传给服务器，既解决了一次性传大文件容易断的问题，又能避免重复上传。配合上暂停续传、文件压缩这些小技巧，就算传几G的备份文件，也能轻松搞定。下次再碰到传大文件的需求，不用再怕失败，用这个方法就能顺顺利利完成啦。