js文件分片上传

写在前面
今天我们写一下关于js的分片上传，因为工作中很多时候上传文件是比较大的，为了不让卡死，我们可以使用分片上传的方式进行文件的传输，下面就简单的将思路梳理一下，然后贴上代码

思路分析
既然是分片上传，那么首先要知道不分片的时候是怎么上传的，我们一般是直接使用file文件然后将其放到formData对象中，作为参数上传，这是最基本的一种方式，分片其实就是将这一个整体的操作进行多次，每一次的数据量根据我们的定义进行分，也就是说，假设一个文件的大小是10Mb，我们将其分为十份，每一份都按照前面所的完整的上传过程进行上传，然后循环十次即可将全部的都上传结束，这是我们的基本思路，下面我们贴上代码分析一下

源代码实现

const size = 10000 //分片大小
const url = 'https://httpbin.org/post' // 上传的url
/**
* @function fragmentAtionUpload 分片上传
* @params file 上传的文件
* @params cbUrl 上传的回调函数
* @params size 分片的大小
*/
let fragmentAtionUpload = async (file = '', cbUrl, size = 1) => {
for (let i = 0; i < file.size; i += size) {
let chunk = file.slice(i, i + size)
let formData = new FormData()
formData.append('frmgmentData', chunk)
await cbUrl(formData)
}
}
/**
* @function cbUrl 分片上传回调函数
* @params fileData 上传的文件
*/
let cbUrl = (fileData) => {
fetch(url, {
method: 'post',
body: fileData
}).then(data => {
return data.text()
}).then(res => {
// 这里获取到的就是每一片的真实数据，可以进行下载展示
console.log(res)
})
}
// 文件操作上传
let uploadByFragment = () => {
let file = document.getElementById('file').files[0]
fragmentAtionUpload(file, cbUrl, size)
}

<input type="file" id="file" οnchange="uploadByFragment()">

代码分析
如上所示，我们首先声明了一个函数进行传递文件，url和分片的大小，回调函数就做一件事，就是上传，他不管上传的大小，所以我们在循环的时候反复调用这个函数即可，最后是文件操作的函数就不多说了，总体来说最基本的分片上传还是比较简单的。

问题分析
这里有一个比较致命的问题，就是因为是分片上传，所以文件是被切成了一段一段的，那么就意味着如果上传的过程中因为网络或者别的原因中断了，那么问题就比较严重了，你可以选择重新上传，但是因为前面的一些片段已经上传上去了，但是因为不是一个完整的整体，所以基本上就是脏数据，想要解决这个问题就需要使用断点续传，就是假设上传中断了以后，我们可以在中断的我位置继续进行上传，这样可以解决这个问题

参考文章：http://blog.ncmem.com/wordpress/2023/10/09/js%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论