vue实现文件的分片上传

const CHUNK_SIZE = 100 * 1024; // 100KB
function sliceFile(file) {
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
const chunks = [];
for (let index = 0; index < totalChunks; index++) {
const start = index * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, file.size);
const chunk = file.slice(start, end);

chunks.push({
index,
data: chunk
});
}

return chunks;
}

使用axios库将这些小块上传到服务器：您可以使用axios库来进行网络请求，将这些小块上传到服务器。

import axios from 'axios';
function uploadChunks(chunks) {
const requests = [];

for (let chunk of chunks) {
const formData = new FormData();
formData.append('index', chunk.index);
formData.append('data', chunk.data);

const request = axios.post('https://your-api-url/chunk-upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});

requests.push(request);
}

return Promise.all(requests);
}

在这里，我们将每个块数据使用FormData对象构建成一个表单数据，并使用axios.post()方法发送POST请求上传到服务器。

在服务器端将这些小块合并为原始文件：服务器端需要实现将这些小块合并成原始文件的逻辑。例如，您可以将这些小块存储到临时文件夹中，等待所有的块上传后再将它们合并成完整的文件，并将其存储到永久文件夹中。

在需要时删除临时文件：上传和合并完成后，服务器端应该删除临时文件以释放系统资源，并保证数据安全。

在Vue中，当用户选择一个要上传的文件时，可以使用上面提到的sliceFile()函数将文件分割为多个小块，并使用uploadChunks()函数将这些小块上传到服务器。在上传完成后，您可以调用服务器上合并这些小块的接口，最终生成完整的文件。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/15/vue%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e7%9a%84%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论