前端 OSS 批量上传文件夹 - 巧用分片上传，提升效率

前端

2023-11-29 18:27:05

利用分片上传提升前端 OSS 批量上传效率和稳定性

在云存储服务日益盛行的背景下，对象存储（OSS）凭借其卓越的可靠性、经济性和可扩展性，成为存储海量非结构化数据的理想选择。对于前端开发人员而言，如何高效、稳定地将本地文件夹中的文件批量上传到 OSS，是一个至关重要的挑战。

传统上传方式的局限性

传统的文件上传方式通常采用逐个文件上传的策略。虽然这种方法在处理小文件时表现尚可，但在面对大量小文件或大文件时，却暴露了严重的不足：

低效率： 逐个文件上传需要对每个文件发起单独的请求，极大地限制了并发能力，导致上传速度缓慢。
低稳定性： 如果其中一个文件上传失败，会影响整个上传过程，导致上传失败或不完整。
大文件限制： 传统上传方式对文件大小有限制，无法满足大文件上传的需求。

分片上传的优势

为了解决这些痛点，OSS 引入了分片上传功能。分片上传将文件拆分成更小的分片，并行上传到 OSS 中，具有以下显著优势：

提升上传效率： 并行上传多个分片，充分利用网络带宽，大幅提高上传速度。
增强稳定性： 如果某个分片上传失败，不会影响其他分片的上传，确保整体上传过程的稳定性。
支持大文件上传： 分片上传没有文件大小限制，可以上传任意大小的文件。

实现前端 OSS 批量上传文件夹

借助第三方库或框架，我们可以轻松实现前端 OSS 批量上传文件夹的功能。这里推荐使用 aliyun-oss-js，它是阿里云官方提供的 JavaScript SDK，提供了丰富的 OSS 操作 API。

代码示例

// 初始化 OSS Client
const client = new OSS({
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  bucket: 'yourBucketName',
  region: 'yourRegion',
});

// 递归遍历文件夹，批量上传文件
async function uploadFolder(localPath, remotePath) {
  // 遍历本地文件夹
  const files = await listFiles(localPath);
  for (const file of files) {
    const filePath = path.join(localPath, file);
    // 判断是否为文件
    if (fs.lstatSync(filePath).isFile()) {
      // 上传文件到 OSS
      await client.multipartUpload(path.join(remotePath, file), filePath, {
        // 分片大小（字节）
        partSize: 1024 * 1024 * 5,
      });
    }
  }
}