Vue 轻松直达阿里云 OSS：断点续传、分片上传、批量上传无压力！

前端

2024-01-26 11:30:57

在当今 Web 开发的广阔世界中，文件上传功能可谓无处不在，从简单的个人资料图片更新到庞大电子商务平台上的产品图像库维护。然而，当涉及到将大量文件高效可靠地上传到云存储服务（如阿里云 OSS）时，挑战就来了。

传统文件上传的痛点

传统的单文件上传方法在处理大量文件时往往捉襟见肘，尤其是在面对不稳定的网络连接或意外中断的情况下。断点续传和分片上传等技术被引入以克服这些限制，但实现这些技术却并非易事。

Vue 直传阿里云 OSS 的利器

对于使用 Vue 框架的前端开发者来说，一个令人振奋的消息来了：现在，有一个便捷的解决方案可以实现与阿里云 OSS 的无缝文件上传。借助这个解决方案，开发者可以轻松应对断点续传、分片上传和批量上传等复杂场景。

揭秘解决方案

此解决方案的核心是一个轻量级 JavaScript 库，它封装了阿里云 OSS SDK 的强大功能。该库提供了直观的 API，使开发者能够轻松实现以下功能：

断点续传： 即使在网络中断后，也能从上次中断处恢复文件上传。
分片上传： 将大文件分割成较小的分片，并行上传以提高速度。
批量上传： 同时上传多个文件，节省时间和资源。

实战案例

为了进一步说明，我们提供了一个实际案例，演示如何使用此解决方案将文件从 Vue 前端直接上传到阿里云 OSS：

import OSS from 'ali-oss';

const client = new OSS({
  accessKeyId: '<YOUR_ACCESS_KEY_ID>',
  accessKeySecret: '<YOUR_ACCESS_KEY_SECRET>',
  bucket: '<YOUR_BUCKET_NAME>',
});

const file = document.querySelector('input[type=file]');

file.addEventListener('change', async () => {
  const [file] = file.files;
  const { size } = file;
  const progress = document.createElement('progress');
  document.body.appendChild(progress);

  const result = await client.multipartUpload(file.name, file, {
    progress: (percentage) => {
      progress.value = percentage * size / 100;
    },
  });

  console.log(result);
});