如何解析实现JS断点续传文件上传的代码？

本文共计1391个文字，预计阅读时间需要6分钟。

刚开始学习前端开发就遇到了文件上传问题，需要求可断点续传的解决方案。查阅了很多资料，发现H5的file API刚好能满足我们的需求，但也遇到了一些问题。以下是记录下来的一些问题和解决方案，供有同样需求的伙伴参考。

刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现H5的file API刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需求的朋友提供一些帮助。

一、首先，为了引入文件对象，需要在H5页面上放置一个file类型的输入标签。

<input type="file" onchange="fileInfo()">

当选择文件之后显示文件相关信息：

function fileInfo() { let fileObj = document.getElementById('file').files[0]; console.log(fileObj); }

我们获取到的对象本身是一个数组，这里只选择了一个文件，需要选择多个文件可在input标签添加multiple属性。现在我们打开浏览器控制台可以看到输出了文件的最后修改时间、文件大小和文件名等信息：

二、好了，当我们获取到选择的文件对象之后，现在需要把文件上传到服务器，可以模拟表单事件进行上传，需要引入FormData对象，其次，由于HTTP对文件上传大小的限制，所以要对文件切块上传，在服务器收到文件块之后拼接成一个整体，最后还需要一个进度条去显示上传进度。