vue axios 分段上传

Vue axios分段上传可以通过将文件分割成多个块，并使用axios的post方法逐个上传这些块来实现。可以使用FormData对象来创建一个包含文件块的表单数据，并在每个请求中设置适当的请求头。

首先，需要将文件分割成块。可以使用File API的slice方法来实现这一点。根据文件的大小和每个块的大小，可以计算出需要分割的块数。

然后，可以创建一个循环来逐个上传这些块。在每次循环迭代中，创建一个新的FormData对象，并向其中添加当前块。还需要设置适当的请求头，以便服务器能够正确地识别和重组这些块。

最后，可以使用axios的post方法将每个块上传到服务器。在每个请求的回调函数中，可以检查上传的进度，并根据需要更新UI。

如下是一个示例代码：

import axios from 'axios';

const CHUNK_SIZE = 1024 * 1024; // 每个块的大小，这里设置为1MB

function uploadFile(file) {
  const fileSize = file.size;
  const totalChunks = Math.ceil(fileSize / CHUNK_SIZE);

  for (let i = 0; i < totalChunks; i++) {
    const start = i * CHUNK_SIZE;
    const end = start + CHUNK_SIZE;
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('file', chunk, file.name);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);

    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: (progressEvent) => {
        const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        console.log(`Chunk ${i + 1}/${totalChunks} uploaded: ${progress}%`);
      },
    });
  }
}

// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});