前置知识
-
File对象：表示一组文件，我们使用
<input type="file" />去选择文件时，这些文件就被存储在File对象中。 -
Blob对象：表示二进制数据，常用于存储大型数据对象（如图像、音频等）。File对象是Blob对象的一个子类，它继承了Blob对象的所有属性和方法。
-
formData对象：前端先将文件存储在formData当中，才能传输给后端。
点击查看代码
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<h1>大文件上传</h1>
<input type="file" id="fileInput" accept="image/*">
<button id="uploadButton">切片上传</button>
<br>
</div>
<script>
//chunk就是一个切片，也就是小文件
async function uploadChunk (chunk) {
const formData = new FormData()
formData.append('fileName', 'test.jpg') // 这里会在上传时候加上
formData.append('file', chunk)
//这里的地址可以替换为你的后端地址
const response = await fetch('https://file.io', {
method: 'POST',
body: formData
})
const result = await response.json()
return result
}
document.getElementById('uploadButton').addEventListener('click', async function () {
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const chunkSize = 100 * 1024 // 100KB
const totalChunks = Math.ceil(file.size / chunkSize)
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize
const end = Math.min(start + chunkSize, file.size)
const chunk = file.slice(start, end)
//上传一个切片
const result = await uploadChunk(chunk)
}
});
</script>
</body>
</html>
大文件上传 核心就是 File.Slice（）方法，对文件进行切割，将大文件切割成一个个小文件，然后交给后端
踩坑：
这样获取出来的files是一个fileList,需要手动取出第0个，才是具体的file对象
var input = document.getElementById("fileInput")
var files = input.files
参考：https://blog.csdn.net/wtswts1232/article/details/130663725
标签：文件,const,chunk,前端,file,分片,上传,formData From： https://www.cnblogs.com/HugoKwong/p/18290549