Vue3上传图片、音视频、office、zip到阿里云OSS，保姆级详细教程，超详细！

前端

2023-11-22 03:41:31

使用 Vue3 将文件上传到阿里云 OSS：详细指南

环境准备

在踏上 Vue3 文件上传阿里云 OSS 的旅程之前，确保已具备以下先决条件：

Vue3 项目：一个现有的 Vue3 项目或一个全新的项目。
阿里云 OSS 账户：一个已注册的阿里云 OSS 账户，提供访问对象存储服务。
阿里云 OSS SDK：一种软件开发工具包，用于与阿里云 OSS 服务交互。

配置阿里云 OSS

准备好环境后，是时候配置阿里云 OSS 了。以下步骤将引导您完成此过程：

创建存储空间： 存储空间是存储文件的容器。在阿里云 OSS 控制台中创建存储空间。
安装 OSS SDK： 使用以下命令通过 npm 安装 OSS SDK：
```
npm install --save ali-oss
```
导入 OSS SDK： 在 Vue3 项目中导入 OSS SDK：
```
import OSS from 'ali-oss';
```

配置 OSS 客户端： 使用您的访问密钥 ID、访问密钥秘钥和存储空间名称创建 OSS 客户端：

const client = new OSS({
  region: 'oss-cn-beijing', // 您的区域，例如 oss-cn-beijing
  accessKeyId: 'yourAccessKeyId', // 您的 AccessKeyId
  accessKeySecret: 'yourAccessKeySecret', // 您的 AccessKeySecret
  bucket: 'yourBucketName', // 您的存储空间名称
});

文件上传

现在，您已配置好 OSS，让我们深入了解如何使用 OSS SDK 上传文件：

准备文件路径： 确定要上传的文件的本地路径。
指定 OSS 路径： 确定要在 OSS 中存储文件的位置。
使用 put() 方法： 使用 client.put() 方法触发文件上传过程。该方法接受两个参数：本地文件路径和 OSS 路径。
处理结果： 上传完成后，处理 put() 方法返回的 Promise。成功上传将触发一个回调函数，而失败将引发异常。

代码示例：

// 文件上传
client.put('path/to/local/file.txt', 'oss/path/file.txt')
  .then((result) => {
    console.log('文件上传成功');
  })
  .catch((err) => {
    console.error('文件上传失败', err);
  });

文件下载

类似于文件上传，文件下载也使用 OSS SDK 完成：

指定 OSS 路径： 确定要从 OSS 下载的文件的路径。
准备本地文件路径： 确定要在本地存储下载的文件的位置。
使用 get() 方法： 使用 client.get() 方法触发文件下载过程。该方法接受两个参数：OSS 路径和本地文件路径。
处理结果： 下载完成后，处理 get() 方法返回的 Promise。成功下载将触发一个回调函数，而失败将引发异常。

代码示例：

// 文件下载
client.get('oss/path/file.txt', 'path/to/local/file.txt')
  .then((result) => {
    console.log('文件下载成功');
  })
  .catch((err) => {
    console.error('文件下载失败', err);
  });