vue如何实现文件切片上传
这篇文章主要介绍了vue如何实现文件切片上传的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue如何实现文件切片上传文章都会有所收获，下面我们一起来看看吧。
成都创新互联服务项目包括东洲网站建设、东洲网站制作、东洲网页制作以及东洲网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，东洲网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到东洲省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
在实际开发项目过程中有时候需要上传比较大的文件，然后呢，上传的时候相对来说就会慢一些，so，后台可能会要求前端进行文件切片上传，很简单哈，就是把比如说1个G的文件流切割成若干个小的文件流，然后分别请求接口传递这个小的文件流。
流程简说
实现文件切片导入，首先我们使用 elementUI 也好，原生的 upload 标签也好，获取到文件 file 文件流，然后需要做的一件事情就是 知道这个文件之前有没有上传过，我们需要向后台提交一个这个文件唯一的标识符，然后让后端告诉我们这个问题后台有没有，这时候，后端可能返回我们三种状态：
文件没有，需要全部上传。
这个文件存在了，前端不需要再上传。
这个文件上传了一部分，需要继续把没有上传的部分上传。
只有这三种状态，实现这个步骤的一个重要参数就是这个文件的唯一标识符，这个标识符，使用的就是这个文件的 MD5 标识码。所以我们首先需要获取这个文件的 MD5 唯一标识码。
我们知道文件需要上传或者是需要部分上传的时候，我们就需要进行切片操作了。这个就很简单了，比如文件的二进制字节流一共1个G，然后一般是 5M 切一片，所以说如果是1个G 的文件需要切 205 片，当然最后一片不一定是 5M，然后我们走文件分片上传的接口，发起文件分片导入的请求。
首先明确一点，就是我们把这 205 个分片数据流提交完，后台是需要合并的，就是把我们分片提交的在这 205 个文件流合成一个大的文件保存起来，这样，后台合并完的文件就是我们最终要提交导入的文件，既然后端需要合并，我们又是一片一片上传的，总得让后端知道每一片是这个文件的哪一部分吧？所以说我们提交分片请求的时候一般需要传递这几个参数：
chunk： 当前是第几个分片，一般从 0 开始。
chunkSize：分片的大小，一般是5M，即5242880字节。
chunks：一共有多少分片。
file：当前分片的文件流。
md5：整个文件的 MD5 唯一标识码，不是分片的哈。
name：当前文件的名称。
size：当前分片大小（如果最后一块不一定是 5M）。
这样后端就知道怎么去合并最后的文件了。当然了具体的字段需要后端去定义，然后我们按照这个思路去相应的对接就可以了。
OK，等我们 205 个分片数据全部提交完成，需要再走一个接口，就是通知后端，好了，我前端分片都传完了，你可以合并文件了。
然后后端合并完成，文件导入成功！
获取文件的 MD5 唯一标识码
很多人说哈，MD5 不是加密嘛，其实这个想法在这里不是很对哈，MD5 是加密不了文件的，只会生成一个唯一的编码，这么说呢，哎哟，就当是加密吧，但是别妄想提交一个 MD5 编码就当把加密的文件提交给后端了哈，首先这个就是一个字符串，不是加密的文件，第二，这个玩意并不能解密。我们这里只是给文件生成一个唯一标识符，让后端判断服务器之前有没有存在过这个文件，如果唯一标识有的话，就说明之前上传过，直接用之前的就可以了，就不用再次上传了，毕竟如果文件修改了，这个 MD5 标识码是会变的。
怎么获取文件的 MD5 编码很简单哈，在vue里面需要使用一个库 spark-md5。
一句命令安装
npm install --save spark-md5
然后我们可以写一个方法来封装一下。
创建一个 fileMd5Sum.js 文件：
import SparkMD5 from 'spark-md5'
export default {
// md5值计算
fileMd5Sum(file) {
return new Promise(resolve => {
let fileReader = new FileReader()
let Spark = new SparkMD5.ArrayBuffer()
fileReader.readAsArrayBuffer(file)
fileReader.onload = function (e) {
Spark.append(e.target.result)
let md5 = Spark.end()
resolve(md5)
}
});
}
}
然后在需要使用的时候就可以使用了，当然这里返回的是一个 Promise，直接 .then 就可以获取了。
或者是使用 async、 await 。
let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)
文件切片
获取了文件MD5标识码，后台说需要提交，我们就需要把文件切片，从头提交或者是提交部分操作了，如果不需要的话直接走合并接口就可以了，走合并接口其实是告诉后台合并，我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。
文件切片就是类似于字符串截取，这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 elementUI 文件上传组件获取到了文件 file。
获取文件名 name
let fileName = file.name // 获取文件名
分片文件大小 chunkSize
let chunkSize = 5 * 1024 * 1024 // 一般是 5M，具体多少看后端想要多少
文件切片 chunkList 列表
let chunkList = [] // 创建一个数组用来存储每一片文件流数据
if (file.size < chunkSize) { // 如果文件大小小于5M就只有一片，不用切都
chunkList.push(file.raw.slice(0)) // 文件流从第一个字节直接截取到最后就可以了
} else { // 如果文件大小大于5M 就需要切片了
var start = 0, end = 0 // 创建两个变量 开始位置 结束位置
while (true) { // 循环
end += chunkSize // 结束为止 = 结束位置 + 每片大小
let blob = file.raw.slice(start, end) // 文件流从开始位置截取到结束位置
start += chunkSize // 截取完，开始位置后移
if (!blob.size) { // 如果截取不到了就退出
break;
}
chunkList.push(blob) // 把截取的每一片数据保存到数组
}
}
切片总数 chunks
我们上一步已经获取到每片文件流的数组了，所以说呢，直接获取就可以了。
let chunks = chunkList.length
切片大小 size
我们是按照 5 M 切割的，所以说每片大小应该是 5 * 1024 * 1024 但是呢，不对，因为最后一片不一定就是正好的 5 M，所以说我们可直接 .size 获取一下大小。比如：
chunkList[0].size // 获取第1片大小
参数都找齐了，然后就走切片提交接口开始提交数据就可以了。
合并
当我们把分片数据全部提交成功，后台返回说切片文件保存成功之后，我们就可以走最后一个接口，提交就可以了。
关于“vue如何实现文件切片上传”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue如何实现文件切片上传”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
网站名称：vue如何实现文件切片上传
标题路径：https://www.cdcxhl.com/article44/ijjhhe.html
成都网站建设公司_创新互联，为您提供标签优化、响应式网站、品牌网站设计、营销型网站建设、外贸建站、网站排名
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
