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实现文件的分片上传/