推荐|做了个 Vue3 上传大文件的项目，顺手搞懂了 OSS、Pinia 和断点续传

嘿大家好～今天想跟你们分享下我最近搞的一个小项目：大文件上传功能实现，用的是 Vue3 + Pinia，再加上 Supabase 和阿里云 OSS 来搞后端和存储。

其实最开始就是接了个需求，说是要支持上传大文件，还得断点续传、支持多线程上传、进度条这些……我心里一开始是发虚的😅，但做着做着发现，哎，其实也没那么难嘛！

技术栈先亮一下

我用的是这些：

Vue 3 + TypeScript：主框架，写起来舒服还类型安全
Pinia：状态管理，比 Vuex 清爽多了
阿里云 OSS：用来存大文件，支持分片上传
Supabase：搞用户登录和数据库记录
还有一些小工具：spark-md5（搞秒传用的），ali-oss SDK

分片上传是怎么回事？

说人话：文件太大，直接传一整块容易失败，所以要“切片”。

比如你有个 2GB 的视频，我用 JS 把它按 5MB 切成很多小块，然后一个个发给 OSS。OSS 接到这些片段后自己组装成一个完整文件。就像发快递，把一本书拆成 N 个包裹寄过去，收件人收到之后自己拼起来。

关键代码就一个 slice：


ini
 代码解读
复制代码
const chunkSize = 5 * 1024 * 1024
const chunks = []
for (let i = 0; i < file.size; i += chunkSize) {
  chunks.push(file.slice(i, i + chunkSize))
}

断点续传也搞了！

这个功能其实是“锦上添花”了。原理也不复杂，就是你每次上传完一个分片，就记录一下它的状态，比如存在 localStorage 或者数据库里。下次用户断网回来，可以接着上传没完成的部分。

用 ali-oss 的 multipartUpload 可以接入 checkpoint，很香！


javascript
 代码解读
复制代码
client.multipartUpload(key, file, {
  checkpoint: savedCheckpoint, // 可恢复
  progress: (p, cpt) => {
    saveCheckpoint(cpt) // 本地保存进度
  }
})

秒传我也尝试了下（可选）

用的是文件的 hash（用 spark-md5 算出来），传给后端看数据库有没有，有就直接跳过上传。这个体验太爽了，比如你上传过一次，别人也上传同个文件，直接“秒传”成功！

🗃 Supabase + OSS 的搭配

文件是上传到阿里云 OSS，记录是存在 Supabase 表里，比如：

用户 ID
文件名
hash
上传时间
OSS 的 key

然后列表页就从 Supabase 查这些记录，拼出 OSS 临时签名链接下载文件。私有 bucket 安全性也有了。

用 Pinia 管上传状态，是真的香！

一开始我乱用 ref 和 reactive 管状态，结果状态乱七八糟。后来改用 Pinia，一个 uploadStore 搞定全部：


typescript
 代码解读
复制代码
export const useUploadStore = defineStore('upload', {
  state: () => ({
    uploading: false,
    progress: 0,
    currentFile: null
  }),
  actions: {
    updateProgress(p: number) {
      this.progress = p
    }
  }
})

页面和上传组件直接共享状态，丝滑～

最后说点感受

做完之后我真心觉得，大文件上传虽然听起来复杂，但其实理解了核心原理 + 找对 SDK，真的不难。

几个建议送给想做的姐妹兄弟们：

分片上传是核心，搞懂就赢了一半
OSS 的 multipartUpload 用好了会省很多事
秒传 + 断点续传能大幅提升用户体验
Pinia 管状态真的香，vue3 项目必备
如果你后端不想自己搭，用 Supabase 真的是前端福音