本文將詳細介紹一個基于 Vue.js 的分片上傳組件的設計與實現，該組件支持大文件分片上傳進度顯示等功能。

組件概述

這個上傳組件主要包含以下功能：

1. 支持大文件分片上傳（默認5MB一個分片）
2. 支持文件哈希計算，用于文件唯一標識
3. 顯示上傳進度（整體和單個文件）
4. 支持自定義UI樣式
5. 提供完整的文件管理功能（添加、刪除）
6. 后端支持分片合并和臨時存儲

組件結構

組件由三個主要文件組成：

1. Uploader.vue - 主組件
2. fileChunk.ts - 文件分片和哈希計算工具
3. uploader.post.ts - 后端API處理
4. uploaderImg.vue - 調用示例

核心功能實現

1. 文件分片處理

在 fileChunk.ts 中，我們實現了文件分片功能：

import SparkMD5 from 'spark-md5';
/*** 創建文件分片* @param file 文件對象* @param chunkSize 每個分片的大小 (字節)*/
export const createFileChunk = (file: File, chunkSize: number) => {const chunks = []let current = 0while (current < file.size) {const end = Math.min(current + chunkSize, file.size)const chunk = file.slice(current, end)chunks.push({file: chunk,index: chunks.length,start: current,end: end,size: end - current,})current = end}return chunks
}/*** 計算文件hash (使用SparkMD5)* @param file 文件對象*/
export const calculateHash = (file: File): Promise<string> => {return new Promise((resolve) => {const spark = new SparkMD5.ArrayBuffer()const reader = new FileReader()const chunkSize = 2 * 1024 * 1024 // 2MBconst chunks = Math.ceil(file.size / chunkSize)let currentChunk = 0reader.onload = (e) => {spark.append(e.target?.result as ArrayBuffer)currentChunk++if (currentChunk < chunks) {loadNext()} else {resolve(spark.end())}}const loadNext = () => {const start = currentChunk * chunkSizeconst end = Math.min(start + chunkSize, file.size)const chunk = file.slice(start, end)reader.readAsArrayBuffer(chunk)}loadNext()})
}

這個方法將大文件分割成指定大小的多個小分片，便于上傳和管理。

2. 文件哈希計算

使用 SparkMD5 庫計算文件哈希，用于唯一標識文件：

export const calculateHash = (file: File): Promise<string> => {return new Promise((resolve) => {const spark = new SparkMD5.ArrayBuffer()const reader