【解决方案】从 0 到 1 实现“分片+断点续传”完整方案

1
<script setup lang="ts">
2
import { ref, reactive } from 'vue'
3
import axios from 'axios'
4
import SparkMD5 from 'spark-md5' // 用于计算文件Hash（避免同名文件冲突）
5

6
// 响应式状态：记录文件、分片、进度等
7
const selectedFile = ref<File | null>(null)
8
const chunks: Ref<Blob[]> = ref([]) // 切割后的分片列表
9
const progress = ref(0) // 上传进度（%）
10
const isUploading = ref(false) // 是否正在上传
11
const fileHash = ref('') // 文件唯一标识（文件名+大小生成）
12
const abortController = ref(new AbortController()) // 用于取消上传
13

14
/**
15
 * 步骤1：选择文件后生成分片
16
 */
17
const handleFileSelect = (e: Event) => {
18
  const target = e.target as HTMLInputElement
19
  if (!target.files?.length) return
20

21
  const file = target.files[0]
22
  selectedFile.value = file
23

24
  // 生成文件唯一Hash（避免同名文件覆盖）
25
  fileHash.value = SparkMD5.hash(`${file.name}-${file.size}`).toString()
26

27
  // 切割文件：默认5MB/片（可动态调整）
28
  const chunkSize = getDynamicChunkSize()
29
  chunks.value = createChunks(file, chunkSize)
30
  progress.value = 0 // 重置进度
31
}
32

33
/**
34
 * 工具函数：切割文件为分片
35
 * @param file 要切割的文件
36
 * @param chunkSize 分片大小（默认5MB）
37
 * @returns 切割后的分片列表
38
 */
39
const createChunks = (file: File, chunkSize = 5 * 1024 * 1024): Blob[] => {
40
  const chunkList: Blob[] = []
41
  let cur = 0
42
  while (cur < file.size) {
43
    chunkList.push(file.slice(cur, cur + chunkSize))
44
    cur += chunkSize
45
  }
46
  return chunkList
47
}
48

49
/**
50
 * 步骤2：并发上传分片（控制3个同时传）
51
 */
52
const startUpload = async () => {
53
  if (!selectedFile.value || !chunks.value.length) return
54
  isUploading.value = true
55

56
  // 先检查已上传的分片（断点续传核心）
57
  const uploadedChunks = await checkUploadedChunks()
58
  // 过滤出未上传的分片
59
  const needUpload = chunks.value.filter(
60
    (_, index) => !uploadedChunks.includes(index)
61
  )
62

63
  if (needUpload.length === 0) {
64
    await mergeFile() // 所有分片已传，直接合并
65
    return
66
  }
67

68
  // 并发控制：同时传3个分片
69
  const maxConcurrent = 3
70
  const total = needUpload.length
71
  let uploaded = 0
72

73
  // 用“任务池”控制并发
74
  const taskPool = new Set()
75
  for (const [index, chunk] of needUpload.entries()) {
76
    const task = uploadChunk(chunk, index)
77
    taskPool.add(task)
78

79
    // 上传成功后更新进度
80
    task.then(() => {
81
      uploaded++
82
      progress.value = Math.round((uploaded / total) * 100)
83
      taskPool.delete(task)
84
    })
85

86
    // 任务池满了就等一个完成
87
    if (taskPool.size >= maxConcurrent) {
88
      await Promise.race(taskPool)
89
    }
90
  }
91

92
  // 等所有任务完成
93
  await Promise.all(taskPool)
94
  await mergeFile() // 合并文件
95
  isUploading.value = false
96
  progress.value = 100
97
}
98

99
/**
100
 * 工具函数：上传单个分片
101
 * @param chunk 分片文件
102
 * @param index 分片序号
103
 */
104
const uploadChunk = async (chunk: Blob, index: number) => {
105
  const md5 = await calculateMD5(chunk)
106
  const formData = new FormData()
107
  formData.append('chunk', chunk)
108
  formData.append('fileHash', fileHash.value)
109
  formData.append('chunkIndex', index.toString())
110
  formData.append('fileName', selectedFile.value!.name)
111
  formData.append('chunkMD5', md5)
112

113
  const upload = async () => {
114
    return await axios.post('/api/upload-chunk', formData, {
115
      signal: abortController.value.signal,
116
    })
117
  }
118

119
  try {
120
    await withRetry(upload)
121
  } catch (error) {
122
    throw new Error(`分片${index}上传失败：${(error as Error).message}`)
123
  }
124
}
125

126
/**
127
 * 带指数退避的重试函数
128
 * @param fn 要执行的上传函数
129
 * @param retries 重试次数
130
 * @returns 上传结果
131
 */
132
const withRetry = async (fn: () => Promise<any>, retries = 3) => {
133
  try {
134
    return await fn()
135
  } catch (error) {
136
    if (retries === 0) throw error
137
    const delay = Math.pow(2, 3 - retries) * 1000
138
    await new Promise((resolve) => setTimeout(resolve, delay))
139
    return withRetry(fn, retries - 1)
140
  }
141
}
142

143
/**
144
 * 步骤3：合并分片（所有分片传完后调用）
145
 */
146
const mergeFile = async () => {
147
  await axios.post('/api/merge-chunk', {
148
    fileHash: fileHash.value,
149
    fileName: selectedFile.value!.name,
150
    chunkSize: 5 * 1024 * 1024, // 分片大小（需和前端一致）
151
  })
152
  // 清理本地缓存（断点续传用）
153
  localStorage.removeItem(`uploaded-${fileHash.value}`)
154
}
155

156
/**
157
 * 断点续传核心：检查已上传的分片
158
 */
159
const checkUploadedChunks = async () => {
160
  // 1. 查服务器已传分片
161
  const res = await axios.get('/api/check-chunks', {
162
    params: { fileHash: fileHash.value },
163
  })
164
  const serverUploaded = res.data.uploadedChunks
165
  // 2. 查本地缓存（上次中断的分片）
166
  const localUploaded = JSON.parse(
167
    localStorage.getItem(`uploaded-${fileHash.value}`) || '[]'
168
  )
169
  // 取交集：确保准确性
170
  return [...new Set([...serverUploaded, ...localUploaded])]
171
}
172

173
/**
174
 * 取消上传：用AbortController中断请求
175
 */
176
const cancelUpload = () => {
177
  abortController.value.abort()
178
  isUploading.value = false
179
  // 保存未完成的分片到本地（下次续传用）
180
  localStorage.setItem(
181
    `uploaded-${fileHash.value}`,
182
    JSON.stringify(chunks.value.map((_, i) => i))
183
  )
184
}
185

186
/**
187
 * 根据网络类型调整分片大小
188
 * @returns 分片大小
189
 */
190
const getDynamicChunkSize = () => {
191
  const connection = navigator.connection as any
192
  if (!connection) return 5 * 1024 * 1024
193

194
  switch (connection.effectiveType) {
195
    case '4g':
196
      return 10 * 1024 * 1024 // 4G→10MB
197
    case '3g':
198
      return 2 * 1024 * 1024 // 3G→2MB
199
    case '2g':
200
      return 1 * 1024 * 1024 // 2G→1MB
201
    default:
202
      return 5 * 1024 * 1024 // 其他→5MB
203
  }
204
}
205

206
/**
207
 * 计算Blob的MD5
208
 * @param blob 要计算MD5的Blob对象
209
 * @returns MD5值
210
 */
211
const calculateMD5 = (blob: Blob): Promise<string> => {
212
  return new Promise((resolve) => {
213
    const reader = new FileReader()
214
    reader.readAsArrayBuffer(blob)
215
    reader.onloadend = () => {
216
      const md5 = SparkMD5.ArrayBuffer.hash(
217
        reader.result as ArrayBuffer
218
      ).toString()
219
      resolve(md5)
220
    }
221
  })
222
}
223
</script>
224

225
<style scoped>
226
.upload-box {
227
  width: 400px;
228
  margin: 50px auto;
229
  padding: 20px;
230
  border: 1px solid #eee;
231
  border-radius: 8px;
232
}
233

234
.file-input {
235
  margin-bottom: 20px;
236
}
237

238
.upload-btn {
239
  background: #409eff;
240
  color: #fff;
241
  border: none;
242
  padding: 8px 16px;
243
  border-radius: 4px;
244
  margin-right: 10px;
245
  cursor: pointer;
246
}
247

248
.cancel-btn {
249
  background: #f56c6c;
250
  color: #fff;
251
  border: none;
252
  padding: 8px 16px;
253
  border-radius: 4px;
254
  cursor: pointer;
255
}
256

257
.progress-bar {
258
  height: 10px;
259
  border-radius: 5px;
260
  background: #eee;
261
  margin: 10px 0;
262
}
263

264
.progress-inner {
265
  height: 100%;
266
  border-radius: 5px;
267
  background: #409eff;
268
  transition: width 0.3s ease;
269
}
270

271
.progress-text {
272
  text-align: center;
273
  color: #666;
274
}
275
</style>