js文件分片上传

何处锦绣不灰堆

发布于 2023-03-07 19:17:45

7.4K0

发布于 2023-03-07 19:17:45

文章被收录于专栏：农历七月廿一

写在前面

今天我们写一下关于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和分片的大小，回调函数就做一件事，就是上传，他不管上传的大小，所以我们在循环的时候反复调用这个函数即可，最后是文件操作的函数就不多说了，总体来说最基本的分片上传还是比较简单的。

问题分析

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除

file