上传分片切片大文件 XLSX/CSV/TXT

当这个文件数据量也不是很多的时候，有很多前端工具可供选择。例如 SheetJS，就提供了从 Excel、CSV 中解析出用信息的很多方法，

当数据量只是几千条的程度的，选择的余地很多，但是一旦数据量级增加，处理就变得复杂。如果 XLSX/CSV 数据量达到了 100w+ 条，Office、WPS 想打开看一下，都会需要很长的时间

从本地 Excel、CSV、TXT（或者其他格式的）文件中解析出数据，文件体积可能是 5M、50M、500M 甚至更大、

满足以下几项需求

大体积文件支持切片上传
可以断点续传
可以得知上传进度

大文件分片，需要了解Web 页面基本都是通过 <input type='file' /> 来获取本地文件的。而通过 input 的 event.target.files 获取到的 file，其实是一个 File 类的实例，是 Blob 类的子类，Blob 对象表示一个不可变、原始数据的类文件对象，简单理解合一将 Blob 看做二进制容器，表示存放着一个大的二进制文件。Blob 对象有一个很重要的方法：slice()，这里需要注意的是 Blob 对象是不可变的，slice 方法返回的是一个新的 Blob，表示所需要切割的二进制文件。

slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。而 File 接口基于 Blob，File 对象也包含了slice方法，其结果包含有源 Blob 对象中指定范围的数据。

切割的方法，二进制文件进行拆分，

function sliceInPiece(file, piece = 1024 * 1024 * 5) {let totalSize = file.size; // 文件总大小let start = 0; // 每次上传的开始字节let end = start + piece; // 每次上传的结尾字节let chunks = []while (start < totalSize) {// 根据长度截取每次需要上传的数据// File对象继承自Blob对象，因此包含slice方法let blob = file.slice(start, end); chunks.push(blob)start = end;end = start + piece;}return chunks
}

获得文件切割后的数组后，调用接口上传至服务端

let file =  document.querySelector("[name=file]").files[0];const LENGTH = 1024 * 1024 * 0.1;
let chunks = sliceInPiece(file, LENGTH); // 首先拆分切片chunks.forEach(chunk=>{let fd = new FormData();fd.append("file", chunk);post('/upload', fd)
})

上传完成后再至服务端将切片文件拼接成完整文件，让 FileReader 对象从 Blob 中读取数据，通过构造切片的 FormData 时增加参数的方式来处理。比如用参数 ChunkIndex 表示当前切片的顺序，

断点续传

在上传大文件或移动端上传文件时，因为网络质量、传输时间过长等原因造成上传失败，可以使用断点续传。特别地，断点续传上传的图片不支持预处理。特别地，断点续传上传的文件不能使用其他上传方式覆盖，如果需要覆盖，须先删除文件，

名称概念

文件分块：直接切分二进制文件成小块。分块大小固定为 1M。最后一个分块除外。
上传阶段：使用 x-upyun-multi-stage 参数来指示断点续传的阶段。分为以下三个阶段: initate(上传初始化), upload(上传中), complete(上传结束)。各阶段依次进行。
分片序号：使用 x-upyun-part-id 参数来指示当前的分片序号，序号从 0 起算。
顺序上传：对于同一个断点续传任务，只支持顺序上传。
上传标识：使用 x-upyun-multi-uuid 参数来唯一标识一次上传任务, 类型为字符串, 长度为 36 位。
上传清理：断点续传未完成的文件，会保存 24 小时，超过后，文件会被删除。

参考：如何处理大体积 XLSX/CSV/TXT 文件

上传分片切片大文件 XLSX/CSV/TXT相关推荐

asp.net实现ftp上传代码(解决大文件上传问题)
asp.net实现ftp上传代码(解决大文件上传问题) 参考文章: (1)asp.net实现ftp上传代码(解决大文件上传问题) (2)https://www.cnblogs.com/LYunF/ar ...
python 大文件分片上传_Python实现大文件分片上传
转载请注明出处:http://blog.csdn.net/jinixin/article/details/77545140 引言想借着这篇文章简要谈谈WebUploader大文件上传与Python结合 ...
plupload分片上传php,plupload 大文件分片上传与PHP分片合并探索
最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...
jquery 分片上传php,php 大文件分片上传
前端部分上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...
jquery 分片上传php,jquery 大文件分片上传插件 fcup.js
软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装直接下载源码,上传功能需要php环境,演示地 ...
plupload php 分片,plupload上传视频等大文件
本文演示了新浪微博plupload上传视频文件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv.本文的视频上传分两步,首先选择文件,然后点击上传按钮开始上传 ...
poi 上传Excel如何处理大文件，避免内存溢出
使用poi做上传时,使用一般的形式,用户模式:new WorkBook()时,代码简单易懂,但是这种方式只能操作小文件,遇到大的文件就会报内存溢出的错.有问题就要解决,下面分享几种解决方式第一种:只 ...
git上传超过100m大文件
1.git出错如下错误时执行如下可解决错误: git rm --cache '大文件路径' git commit --amend -CHEAD git push 2.当必须上传大文件时.需借助git ...
GitHub 上传大小限制大文件无法上传问题!
壹. 首先下载git-lfs 需要配置lfs密钥(注意不是ssh的密钥)的请看https://github.com/git-lfs/git-lfs git lfs install 贰. 安装好后进入本 ...

上传分片切片大文件 XLSX/CSV/TXT

上传分片切片大文件 XLSX/CSV/TXT相关推荐

最新文章

热门文章