客户端实现阿里云OSS文件上传（分片上传，断点续传）

最新推荐文章于 2025-10-23 01:12:25 发布

原创

最新推荐文章于 2025-10-23 01:12:25 发布 · 4.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#阿里云 #云计算 #vue.js

文章介绍了如何在Vue项目中使用阿里云OSS进行分片上传和断点续传，包括初始化分片上传、获取UploadID、分片切割、逐个上传分片、完成分片上传的步骤。同时提供了暂停和继续上传的实现，以及相关问题的解决方案链接。

前言

阿里云OSS（Object Storage Service）是一种稳定、安全、高扩展性的云存储服务，它允许您以低成本、高可靠、高可用的方式存储和访问任意类型的数据。在实际应用中，文件上传是一个常见的功能需求。为了提高上传效率和文件完整性，我们可以使用分片上传和断点续传技术。

分片上传，断点上传使用场景：
通常在文件大于100 MB的情况下，建议采用分片上传的方法，通过断点续传和重试，提高上传成功率。如果在文件小于100 MB的情况下使用分片上传，且partSize设置不合理的情况下，可能会出现无法完整显示上传进度的情况。对于小于100 MB的文件，建议使用简单上传的方式。

简单上传参考：https://help.aliyun.com/zh/oss/developer-reference/simple-upload-8?spm=a2c4g.11186623.0.0.3f742a44LqLGSc

接下来介绍在vue项目中如何使用分片上传和断点续传。

准备

1.安装阿里云OSS SDK

npm install ali-oss --save

2.创建OSS

import OSS from "ali-oss";
const client = ref(
  new OSS({
   
   
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 填写Bucket名称。
        bucket: 'examplebucket'
  })
);

分片上传

分片上传的步骤：

初始化分片上传：调用OSS API初始化一个分片上传会话，获取一个Upload ID。Upload ID用于标识这次分片上传操作。
分片切割：将待上传的大文件切割成固定大小的分片。
逐个上传分片：按顺序将每个分片逐个上传到阿里云OSS，每个分片上传成功后会返回一个ETag，用于标识该分片。
完成分片上传：在所有分片都上传完成后，调用OSS API完成分片上传操作。在此步骤中，需要将每个分片的ETag和分片号按顺序传递给OSS，OSS将根据这些信息进行分片合并，形成完整的大文件。

代码实现：

const uploadProgress = ref(0); //上传进度
const paused = ref(false); //是否暂停
const name = ref(""); //文件名
const uploadId = ref(); //上传id
const chunkArr: any = ref([]);//分片上传的结果数组
let chunks: any = [];//文件分片结果
const uploadFile1 = async (file: any) => {
   
   
  chunkArr.value = [];
  uploadProgress.value = 0;
  //获取文件分片的结果数组
  chunks =sliceFile(file);
  const {
   
    name: fileName, type: mimeType } = file;
  name.value = fileName;
  //初始化分片上传，获取Upload ID
  const result = await client.value.initMultipartUpload(fileName);
  uploadId.value = result.uploadId;
  //分片上传
  uploadChunk(chunks[0], 1);
};

// 分片
const chunkSize = ref(1 * 1024 * 1024); //分片大小
const size = ref(0);//文件大小
const sliceFile = (file: any) => {
   
   
  const fileSize = file.size;
  size.value = file.size;
  const chu