我们在这里进行大文件上传使用的是分片上传的思路:
- 首先在页面中添加一个input的标签,用来选中我们要传输的大文件,再添加一个交互按钮,让用户来点击进行上传。
- 在input和button标签中,我们绑定两个事件,分别来读取文件的信息(const [file] = e.target.files),还有就是实现上传文件
- 此外,我们用原生XMLHttpRequest,封装请求函数,固定请求方式为POST。
- 在实现文件上传的函数中,我们分别调用了createChunkList(用于实现函数切片),uploadChunks(用于设置FormData),同时又在uploadChunks发送完所有请求时调用mergeRequest(发送合并请求),这是前端部分。
- 在后端部分中我们需要引入两个库
const fse = require("fs-extra")
const multiparty = require("multiparty")
分别用于对文件的控制,如创建读写流,还有就是对FormData的解析
- 在后端中我们开启一个http服务,首先解决跨域,设置响应头和预请求
- 再设置两个路由,分别对接受切片和合并切片进行处理,在合并切片中,我们先得到传过来的文件名和文件大小,再进行合并操作,在合并操作中我们先进行文件切片的排序,再进行创建文件读取流和写入流来进行合并,最终实现功能。