Vue中轻松搞定阿里云OSS文件管理，让数据存储如虎添翼！

2023-02-13 23:32:11

Vue.js 中利用阿里云 OSS 实现高效文件管理

在现代网络应用中，数据存储至关重要，特别是在文件管理方面。阿里云 OSS（对象存储服务） 凭借其无限扩展的存储空间和卓越的安全措施，成为存储海量文件的理想解决方案。本文将详细介绍如何将阿里云 OSS 与 Vue.js 集成，让您轻松地在 Vue.js 应用中实现高效的文件管理。

环境准备

首先，确保已安装 Node.js、npm 和 Vue CLI。使用 Vue CLI 创建一个新的 Vue 项目，为后续的 OSS 集成打好基础。

依赖安装

为了连接 Vue 与阿里云 OSS，我们需要安装几个依赖包：

aliyun-oss-sdk： 提供与 OSS 交互所需的接口。
Ant Design： 为文件管理界面提供优雅的 UI 组件。

在 main.js 中引入 Ant Design

在 main.js 文件中，引入 Ant Design 的样式表和组件库：

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

文件管理界面实现

在 Vue 组件中，使用 Ant Design 组件构建文件管理界面。可以显示文件列表，包含文件名称、大小和上传时间等信息。用户可以点击文件进行预览或下载，也可以上传新文件。

完整代码

// ossClient.js
import OSS from 'aliyun-oss-sdk'

const client = new OSS({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
  region: 'YOUR_REGION',
  bucket: 'YOUR_BUCKET_NAME',
})

export default client

// FileManager.vue
<template>
  <div>
    <a-upload :action="uploadUrl" :headers="headers">
      <a-button icon="upload">Upload</a-button>
    </a-upload>
    <a-table :data-source="files" :columns="columns"></a-table>
  </div>
</template>

<script>
import { ossClient } from '@/ossClient.js'
import { Upload, Table, Button } from 'ant-design-vue'

export default {
  components: { Upload, Table, Button },
  data() {
    return {
      files: [],
      columns: [
        { title: 'Name', dataIndex: 'name' },
        { title: 'Size', dataIndex: 'size' },
        { title: 'Upload Time', dataIndex: 'uploadTime' },
      ],
      uploadUrl: `${ossClient.endpoint}/`,
      headers: { 'x-oss-security-token': ossClient.stsToken },
    }
  },
  created() {
    this.getFiles()
  },
  methods: {
    async getFiles() {
      const res = await ossClient.list({ prefix: 'my-prefix/' })
      this.files = res.objects
    },
    async uploadFile(file) {
      const res = await ossClient.put(`my-prefix/${file.name}`, file)
      console.log(res)
      this.getFiles()
    },
  },
}
</script>