vue前端大文件上传实践

大文件上传

（总结在最后）

1. 创建html结构

2. 创建两个函数，chooseFiles函数用来动态生成文件选择器，handleFilesChange用来处理选择之后的操作

3. 创建startUpload函数把大文件进行切片并且请求后端把切片后的数据传递过去

4. 创建后端接口把接收到的切片文件进行拼接并且删除多余的文件

整体总结：

当用户进行大文件上传的时候，因为文件体积大所以上传比较慢。有时会因为网络原因导致上传中止，上传不成功，这样就给客户带来了极差的体验感。现在进行大文件上传的思路有很多，常见的有：分片上传、断点续传、流式上传等。我之前有做过一个大文件上传、当时我使用的是分片上传这个思路，首先我在页面当中创建两个上传需要的操作按钮。第一个按钮用来调出文件选择器，第二个按钮则用来实现分片上传。第一个按钮就是动态创建一个input并且把它的type 类型设置为'file'然后根据需要配置文件选择器的参数。这样我们就生成了一个文件选择器。将文件上传之后，我配置第二个按钮开始进行文件上传，在这里我先用数组的reduce方法获取到文件的整体大小，然后通过每片的最大单位算出一共需要分多少片。接下来我就使用了File API中的slice()方法对文件开始切片。切片之后我是用递归函数的方法把分好的文件一个个的传递给后端。后端接收到传递的分片数据之后把数据进行拼接完成保存到目标文件夹，并且删除临时分片文件。最后后端将文件上传成功和文件路径返回给我。这样就完成了一个大文件上传，使文件上传更加稳定，并且节省了宽带资源，提高了用户体验。