vue3+ts实现大文件分片上传的功能

前言

在前端项目开发中，文件上传功能是一个常见的需求，而文件较大时，需要使用文件分片上传功能，避免上传过程中出现网络中断等问题导致上传失败。本篇文章将介绍如何使用 Vue 3 + TypeScript 实现文件分片上传功能，并扩展其他注意事项。

技术实现

1. 实现文件分片上传

文件分片上传是将大文件分成多个小文件进行上传，上传完成后再将这些小文件合并成一个完整的文件。文件分片上传的核心是将文件分成多个小块，同时记录每个小块的上传状态，上传完成后再将这些小块合并成一个完整的文件。

以下是一个简单的文件分片上传功能的实现：

复制
const chunkSize = 5 * 1024 * 1024; // 每个分块的大小
let uploadedChunks = []; // 已上传的分块
let totalChunks = 0; // 总分块数

// 文件分片
function chunk(file: File) {
  let chunks = [];
  let start = 0;
  let end = 0;
  while (start < file.size) {
    end = Math.min(start + chunkSize, file.size);
    chunks.push(file.slice(start, end));
    start = end;
  }
  totalChunks = chunks.length;
  return chunks;
}

// 上传分块
function uploadChunk(file: File, chunk: Blob, index: number) {
  let formData = new FormData();
  formData.append('file', chunk);
  formData.append('index', index.toString());
  formData.append('total', totalChunks.toString());
  formData.append('name', file.name);
  formData.append('type', file.type);
  return axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

// 上传文件
async function upload(file: File) {
  let chunks = chunk(file);
  await Promise.all(chunks.map(async (chunk, index) => {
    if (!uploadedChunks.includes(index)) {
      try {
        await uploadChunk(file, chunk, index);
        uploadedChunks.push(index);
      } catch (e) {
        console.error(e);
      }
    }
  }));
  if (uploadedChunks.length === totalChunks) {
    await merge(file);
  }
}

// 合并文件
async function merge(file: File) {
  let formData = new FormData();
  formData.append('name', file.name);
  formData.append('type', file.type);
  return axios.post('/merge', formData);
}

以上代码中，chunk 函数将文件分成多个小块，uploadChunk 函数将分块上传到后端，upload 函数将分块上传到后端，并记录已上传的分块，当所有分块都上传完成后，调用 merge 函数将分块合并成一个完整的文件。

2. 扩展其他优化事项

在实现文件分片上传功能时，还可以考虑以下问题：

1. 文件上传进度的显示：可以使用 axios 的 onUploadProgress 事件监听文件上传进度，更新 UI 显示上传进度。
2. 文件上传中断的处理：如果文件上传中断，需要记录已上传的分块，下次上传时从上次中断的分块继续上传。
3. 文件上传失败的处理：如果文件上传失败，可以记录失败的分块，下次上传时只上传失败的分块。
4. 文件上传速度的优化：可以使用 Web Worker 将文件分块上传和合并操作放到后台执行，避免阻塞主线程。
5. 文件上传的安全性：可以添加文件校验码等机制，确保上传的文件完整性和安全性。

以下是几个优化事项的方案，可供参考：

1. 使用 axios 上传文件

function uploadChunk(file: File, chunk: Blob, index: number) {
  let formData = new FormData();
  formData.append('file', chunk);
  formData.append('index', index.toString());
  formData.append('total', totalChunks.toString());
  formData.append('name', file.name);
  formData.append('type', file.type);
  return axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

以上代码中，使用 FormData 将文件和其他参数打包上传，headers 中设置 Content-Type 为 multipart/form-data，使得后端可以正确解析文件和其他参数。

2. 监听文件上传进度

function upload(file: File) {
  let chunks = chunk(file);
  let progress = 0;
  let loaded = 0;
  axios.defaults.onUploadProgress = function(progressEvent) {
    loaded = progressEvent.loaded;
    progress = Math.round((loaded / file.size) * 100);
    // 更新 UI 显示上传进度
  };
  return Promise.all(chunks.map(async (chunk, index) => {
    if (!uploadedChunks.includes(index)) {
      try {
        await uploadChunk(file, chunk, index);
        uploadedChunks.push(index);
      } catch (e) {
        console.error(e);
      }
    }
  })).then(() => {
    axios.defaults.onUploadProgress = null;
    if (uploadedChunks.length === totalChunks) {
      merge(file);
    }
  });
}

以上代码中，使用 axios.defaults.onUploadProgress 事件监听上传进度，更新 progress 和 loaded 变量，根据 progress 更新 UI 显示上传进度。在 Promise.all 执行完毕后，将 axios.defaults.onUploadProgress 事件设为 null，避免影响其他文件的上传进度监听。

3. 文件上传中断的处理

function upload(file: File) {
  let chunks = chunk(file);
  let progress = 0;
  let loaded = 0;
  axios.defaults.onUploadProgress = function(progressEvent) {
    loaded = progressEvent.loaded;
    progress = Math.round((loaded / file.size) * 100);
    // 更新 UI 显示上传进度
  };
  return Promise.all(chunks.map(async (chunk, index) => {
    if (!uploadedChunks.includes(index)) {
      try {
        await uploadChunk(file, chunk, index);
        uploadedChunks.push(index);
      } catch (e) {
        console.error(e);
        // 记录已上传的分块
        localStorage.setItem(file.name, JSON.stringify(uploadedChunks));
        throw e;
      }
    }
  })).then(() => {
    axios.defaults.onUploadProgress = null;
    if (uploadedChunks.length === totalChunks) {
      merge(file);
    }
  });
}

function resumeUpload(file: File) {
  uploadedChunks = JSON.parse(localStorage.getItem(file.name)) || [];
  upload(file);
}

以上代码中，使用 localStorage 记录已上传的分块，当文件上传中断时，将已上传的分块记录到 localStorage 中，下次上传时从已上传的分块继续上传。resumeUpload 函数从 localStorage 中读取已上传的分块，调用 upload 函数继续上传文件。

结语

本篇文章介绍了如何使用 Vue 3 + TypeScript 实现文件分片上传功能，并扩展了其他优化事项。文件分片上传功能对于大文件的上传非常有用，可以避免上传过程中出现网络中断等问题导致上传失败。但是要追求完美的话其中还是有其他一些要注意的细节点。例如:

• 只上传了一部分分片文件然后用户取消上传了怎么处理？
• 在进行合并的时候合并接口报错时怎么处理？

有没有道理？你想，你细想，你仔细想想