Vue如何实现基于文件切片的长尾词上传功能？

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

目录+流程简介+获取文件的MD5唯一标识码+文件切片+获取文件名+name+分割文件大小+chunkSize+文件切片列表+chunkList+表格+切片总数+chunks+切片大小+size+合并+在实际开发项目中，有时需要上列功能

目录

• 流程简说
• 获取文件的 MD5 唯一标识码
• 文件切片
• 获取文件名 name
• 分片文件大小 chunkSize
• 文件切片 chunkList 列表
• 切片总数 chunks
• 切片大小 size
• 合并

在实际开发项目过程中有时候需要上传比较大的文件，然后呢，上传的时候相对来说就会慢一些，so，后台可能会要求前端进行文件切片上传，很简单哈，就是把比如说1个G的文件流切割成若干个小的文件流，然后分别请求接口传递这个小的文件流。

流程简说

实现文件切片导入，首先我们使用 elementUI 也好，原生的 upload 标签也好，获取到文件 file 文件流，然后需要做的一件事情就是 知道这个文件之前有没有上传过，我们需要向后台提交一个这个文件唯一的标识符，然后让后端告诉我们这个问题后台有没有，这时候，后端可能返回我们三种状态：

• 文件没有，需要全部上传。
• 这个文件存在了，前端不需要再上传。
• 这个文件上传了一部分，需要继续把没有上传的部分上传。