JUST中文网
vue大文件分片上传之simple-uploader.js的使用 |
|
发布日期：2025-01-03 17:43 点击次数：110 |
关于大文件上传
关于单个文件上传：其实就是前端中的文件通过http传到后端，后端再写入服务器的过程
那单个大文件分片上传：其实就是前端把大文件分成了好几块，后端再多次写入服务器的过程
关于秒传与断点续传
秒传：其实就是服务器中存在这个文件了，再次传的时候就不重新上传了，前端直接显示上传成功
断点续传：其实就是文件传了一部分，剩下的还没传。这个时候根据上传的偏移量offset，把剩下的上传到服务器
前提知识
1. 前端使用spark-md5.js对文件进行加密
2. simple-uploader.js的使用
分片上传的思路
先对文件进行md5加密。使用md5加密的优点是：可以对文件进行唯一标识。在后端根据md5判断文件是否存在。向后台发送第一次请求接口，且只发送一次，用于检测，接口里的数据就是我们已经上传过的文件块。用于检测是否需要秒传或者继续上传当文件存在的话，就不用重新再上传。(秒传)当文件不存在的话，且对大文件进行分片。比如一个100M的文件，我们一个分片是5M的话，那么这个文件可以分20次上传。(checkChunkUploadedByResponse方法里面判断)当文件不存在的话，且已经上传了一部分的。接着上传(checkChunkUploadedByResponse方法里面判断)向后台发送第二次请求接口，这时的请求才是正儿八经的上传请求。此时，请求可以停止和继续发。
前端文件切片常见的写法
后端常见的写法
到此这篇关于vue大文件分片上传之simple-uploader.js的使用的文章就介绍到这了,更多相关vue大文件分片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
|
|
|
|
