极简前端：原生OSS分片上传指南

前端

2023-10-16 11:34:01

云存储大文件上传利器：OSS分片上传

在数据爆炸的时代，云存储已成为我们数字生活的基石。阿里云OSS作为云存储服务翘楚，凭借其稳定性和高性价比备受青睐。然而，上传大文件时，传统方法却面临诸多瓶颈。

分片上传：大文件上传的福音

分片上传是一种将大文件划分为更小块，分批上传的创新技术。借助OSS的分片上传功能，我们可以轻松将庞大文件拆分成更小的区块，分批次上传至OSS服务器。这样一来，即使遇到网络波动或设备故障，也不会导致整个上传失败。

入门指南

使用OSS分片上传前，需做好以下准备：

注册阿里云账号 ：访问阿里云官网，注册账号并创建OSS Bucket。
安装OSS SDK for Javascript ：通过 npm 或 CDN 引入OSS SDK，以便在前端代码中使用。
准备前端页面 ：创建一个纯前端页面，包含用于选择文件的<input type="file">元素和用于触发上传的按钮。

分步详解

1. 初始化OSS客户端

const OSS = require('ali-oss');

const client = new OSS({
  region: 'your-region',
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret',
  bucket: 'your-bucket-name',
});

2. 监听文件选择

当用户选择文件后，获取文件列表并计算文件总数：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
  const files = input.files;
  const fileCount = files.length;
});

3. 分片上传

接下来，我们使用OSS客户端分批上传文件：

const chunkSize = 1024 * 1024; // 每个分片的大小为1MB
const partPromises = [];

for (let i = 0; i < fileCount; i++) {
  const file = files[i];

  // 将文件切分成块，并逐块上传
  for (let start = 0; start < file.size; start += chunkSize) {
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const partPromise = client.multipartUploadPart(
      file.name,
      file.size,
      chunk,
      start
    );
    partPromises.push(partPromise);
  }
}

// 等待所有分片上传完成
const parts = await Promise.all(partPromises);

4. 完成分片上传

所有分片上传完成后，需要调用completeMultipartUpload方法来完成整个文件上传：

const uploadId = 'your-upload-id'; // 分片上传时的uploadId
const etagList = parts.map((part) => part.etag);

await client.completeMultipartUpload(file.name, uploadId, etagList);