vue超大文件上传如何实现？

分片上传。先判断文件大敏燃小，是否需要分片，如果需要分片。就可芹早以利用文件的方法slice(start,end)分成一段段的小文件。举个例桥首虚子：

<input type="file">

<script>

let fl = document.querySelector('input')

let SIZE = 20 * 1024 * 1024//文件分片界限是20MB

fl.onchange = function() {

let file = fl.files[0]

let chunks = [], start = 0, end = SIZE

if(file.size >SIZE) {

let m = Math.ceil(file.size / SIZE)//需要分成多少片

while(m--) {

let chunk = file.slice(start, end) //对文件进行分片

chunks.push(chunk)//记录每次分片的文件

start = end

end += SIZE

if(end >file.size) end = file.size

}

//上传所有的分片文件

} else {

//小于分片界限的文件直接上传

}

}

</script>

首先需要明确，上传这东西不仅仅是只需要前端就能完成的很好的，需要前端后端统一数据格式，从而实现断点续传尺漏。（所以，该文适合于全栈工程师，至少是想成为）

还有，为什么需要分片，不分片能实现断点续传吗？分片是为了充分利用网络带宽，加快上传速度；不分片也是能够实现断点续传的。详细参考 HTML5文件上传组件深度剖析.

分片上传与断点续传之间没有很直接的关系.

实现断点续传的前提是需要服务器记录某文件的上传进度，那么根据什么判断是不是同一个文御困悉件呢？可以利用文件内容求md5码，如果文件过大，求取md5码也是一个很长的过程，所以对于大文件，只能针对某一段数据进行计算，加上服务器对cookie用户信息的判断，得到相对唯一的key。

在前端页面，需要将文件按照一定大小进行分片，一次请求只发送这一小片数镇乎据，所以我们可以同时发起多个请求。但一次同时请求的连接数不宜过多，服务器负载过重。对于文件分片 *** 作，H5具有十分强大的File API，直接利用File对象的slice方法即可得到Blob对象。

至于同时传输数据的连接数控制逻辑，就需要花点脑子思考了。前端把数据顺利得传给服务器了，服务器只需要按照数据中给的开始字节位置，与读取到的文件片段数据，写入文件即可

elementUI+el-upload 上传文件大小与文件类型校验

https://blog.csdn.net/weixin_38659265/article/details/89447469

elementUI+Vue 验证上传文件的类型

https://www.jianshu.com/p/49e90bea086c

1)嵌入组件知滚橘

2）第一搭团种文件类型校验

直接在el-upload中加上下面这一行就好，这适用于文件类型比较常见的，文件类型可选择性比较少时

3）第二种适用与校验文件类型比较多时，可以在beforeUpload方法中进行过滤：

4）文件大小校验

可备敬以在beforeUpload方法中进行过滤：

5）beforeRemove方法中需要把不符合大小的文件自动移除

---