从零上手！轻松构建 Vue3 管理后台：一步步打造存储文件服务

2023-10-15 01:57:37

最近，我们在使用 Vue3 编写后台管理项目。鉴于花裤衩 PanJiaChen 的 vue-element-admin 源代码仍然停留在 Vue2，我们决定大胆尝试使用 Vue3 + Vite2 + Pinia 按照源码重写。在这个过程中，我们遇到了一个常见问题：如何集成文件存储服务。

本篇文章将手把手带你构建一个 Vue3 后台管理系统，并集成文件存储服务。我们不会停留在理论层面，而是通过实际操作和代码示例，一步步带领你完成整个过程。

环境准备

在你开始之前，请确保你的系统已经满足以下要求：

Node.js >= 14.17.0
npm >= 6.14.12
Vue3 >= 3.2.26
Vite2 >= 2.9.9
Pinia >= 2.0.12

创建 Vue3 项目

使用 Vite 创建一个新的 Vue3 项目：

npx vite create my-vue3-admin

进入项目目录：

cd my-vue3-admin

安装 Pinia 状态管理库：

npm install pinia

集成文件存储服务

现在，我们开始集成文件存储服务。我们将使用阿里云的 OSS（对象存储服务）。

首先，你需要创建一个阿里云 OSS 账户并创建一个存储桶。有关如何创建 OSS 账户和存储桶的详细说明，请参考阿里云官方文档。

创建 OSS 账户和存储桶后，你需要获取以下信息：

访问密钥 ID (Access Key ID)
访问密钥密码 (Access Key Secret)
存储桶名称 (Bucket Name)
区域 (Region)

安装 OSS SDK

安装阿里云 OSS JavaScript SDK：

npm install @alicloud/oss

创建 OSS 服务

在 src/plugins 目录下创建一个名为 oss.js 的文件。在这里，我们将创建 OSS 服务：

import OSS from '@alicloud/oss';

// 创建 OSS 客户端实例
const ossClient = new OSS({
  region: '你的区域',
  accessKeyId: '你的访问密钥 ID',
  accessKeySecret: '你的访问密钥密码',
  bucket: '你的存储桶名称'
});

export default ossClient;

上传文件

在 src/components 目录下创建一个名为 FileUploader.vue 的组件。在这个组件中，我们将处理文件上传：

<template>
  <input type="file" @change="uploadFile">
</template>

<script>
import { ref } from 'vue';
import ossClient from '@/plugins/oss';

export default {
  setup() {
    const file = ref(null);

    const uploadFile = async (event) => {
      // 获取文件
      const file = event.target.files[0];

      // 文件名
      const fileName = file.name;

      // 上传文件
      await ossClient.put(fileName, file);
    };

    return {
      file,
      uploadFile
    };
  }
};
</script>

获取文件列表

在 src/pages 目录下创建一个名为 FileList.vue 的页面。在这个页面中，我们将获取文件列表：

<template>
  <ul>
    <li v-for="file in files" :key="file.name">{{ file.name }}</li>
  </ul>
</template>

<script>
import { ref, onMounted } from 'vue';
import ossClient from '@/plugins/oss';

export default {
  setup() {
    const files = ref([]);

    const getFiles = async () => {
      // 获取文件列表
      const result = await ossClient.list();

      // 更新文件列表
      files.value = result.objects;
    };

    onMounted(() => {
      getFiles();
    });

    return {
      files
    };
  }
};
</script>