当前位置：首页 > news >正文

分片上传-

news 2025/9/6 5:26:34

分片上传原理：客户端将选择的文件进行切分，每一个分片都单独发送请求到服务端；
断点续传 & 秒传原理：客户端
发送请求询问服务端某文件的上传状态
，服务端响应该文件已上传分片，客户端再将未上传分片上传即可；
如果没有需要上传的分片就是秒传；
如果有需要上传的分片就是断点续传；

每个文件要有自己唯一的标识，这个标识就是将整个文件进行MD5加密，这是一个Hash算法，将加密后的Hash值作为文件的唯一标识；
使用spark-md5第三方工具库，spark-md5是指一个用于计算MD5哈希值的前端JavaScript库

文件的合并时机：当服务端确认所有分片都发送完成后，此时会发送请求通知服务端对文件进行合并操作；

如下图所示是前端分片上传的整体流程：

第一步：将文件进行分片，并计算其Hash值（文件的唯一标识）
第二步：发送请求，询问服务端文件的上传状态
第三步：根据文件上传状态进行后续上传
- 文件已经上传过了
  - 结束 --- 秒传功能
- 文件存在，但分片不完整
  - 将未上传的分片进行上传 --- 断点续传功能
- 文件不存在
  - 将所有分片上传
第四步：文件分片全部上传后，发送请求通知服务端合并文件分片

案例实现

前端使用 Element Plus UI
实现文件选择 → 计算 Hash → 分片上传 → 进度显示
假设后端提供接口：
1. POST /upload/check → 接收 fileHash，返回已上传分片列表
2. POST /upload/chunk → 上传单个分片
3. POST /upload/merge → 所有分片上传完成后通知合并

<template><el-upload:file-list="fileList":before-upload="beforeUpload":show-file-list="false"><el-button type="primary">选择文件上传</el-button></el-upload><el-progressv-if="uploading":percentage="uploadProgress":text-inside="true"></el-progress>
</template><script setup>
import { ref } from 'vue';
import SparkMD5 from 'spark-md5';
import axios from 'axios';const fileList = ref([]);
const uploadProgress = ref(0);
const uploading = ref(false);
const chunkSize = 2 * 1024 * 1024; // 2MB// 计算文件Hash
function calculateFileHash(file) {return new Promise((resolve, reject) => {const spark = new SparkMD5.ArrayBuffer();const fileReader = new FileReader();const chunks = Math.ceil(file.size / chunkSize);let currentChunk = 0;fileReader.onload = e => {spark.append(e.target.result);currentChunk++;if (currentChunk < chunks) {loadNext();} else {resolve(spark.end());}};fileReader.onerror = () => reject('文件读取错误');function loadNext() {const start = currentChunk * chunkSize;const end = Math.min(file.size, start + chunkSize);fileReader.readAsArrayBuffer(file.slice(start, end));}loadNext();});
}// 分片上传
async function uploadFileChunks(file, fileHash) {const chunks = Math.ceil(file.size / chunkSize);// 先询问服务端已上传分片const { data } = await axios.post('/upload/check', { fileHash });const uploadedChunks = data.uploaded || [];let uploadedCount = 0;for (let i = 0; i < chunks; i++) {if (uploadedChunks.includes(i)) {uploadedCount++;uploadProgress.value = Math.floor((uploadedCount / chunks) * 100);continue; // 已上传，跳过}const start = i * chunkSize;const end = Math.min(file.size, start + chunkSize);const chunkData = file.slice(start, end);const formData = new FormData();formData.append('file', chunkData);formData.append('fileHash', fileHash);formData.append('index', i);await axios.post('/upload/chunk', formData, {onUploadProgress: e => {// 分片进度可加权到整体进度const chunkProgress = e.loaded / e.total;uploadProgress.value = Math.floor(((uploadedCount + chunkProgress) / chunks) * 100);},});uploadedCount++;uploadProgress.value = Math.floor((uploadedCount / chunks) * 100);}// 分片上传完成，通知合并await axios.post('/upload/merge', { fileHash, totalChunks: chunks });
}// 选择文件上传
async function beforeUpload(file) {uploading.value = true;uploadProgress.value = 0;fileList.value = [file];// 计算Hashconst fileHash = await calculateFileHash(file);// 分片上传await uploadFileChunks(file, fileHash);uploading.value = false;ElMessage.success('文件上传完成！');return false; // 阻止默认上传
}
</script>