Vue3 Element Plus 阿里OSS实现文件的批量上传

在前端开发中，文件上传功能是一项必不可少的功能。本文将介绍如何使用Vue3、Element Plus和阿里OSS实现文件的批量上传。

简介

Vue3: 一套用于构建用户界面的渐进式JavaScript框架，与Vue2相比有更好的性能和开发体验。
Element Plus: 一套基于Vue3的UI组件库，提供了一系列丰富的可用组件，方便我们快速搭建界面。
阿里OSS: 阿里云对象存储服务，可以快速存储和访问大量的非结构化数据。

准备工作

安装Vue3和Element Plus

npm install vue@next
npm install element-plus@next

创建Vue项目并引入Element Plus

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3+Element Plus</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="./main.js"></script>
</body>
</html>

创建文件上传组件

<template>
  <div>
    <el-upload
      :action="getUploadUrl"
      :on-change="handleChange"
      multiple
      drag
      :before-upload="beforeUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处或点击上传</div>
      <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <el-button type="primary" :loading="uploading" @click="handleUpload">上传到OSS</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'FileUpload',
  data() {
    return {
      fileList: [],
      uploading: false
    };
  },
  methods: {
    getUploadUrl() {
      // 返回上传到OSS的地址
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;

      if (!isJpgOrPng || !isLt500k) {
        this.$message.error('只能上传jpg/png文件，且不超过500kb!');
        return false;
      }
    },
    handleUpload() {
      this.uploading = true;

      // 上传文件到OSS

      setTimeout(() => {
        this.uploading = false;

        // 上传成功后的操作

        this.fileList = [];
      }, 2000);
    }
  }
};
</script>

<style scoped>
.el-icon-upload {
  font-size: 28px;
  color: #409EFF;
}
</style>

实现阿里OSS文件上传

安装ali-oss

npm install ali-oss

在getUploadUrl方法中返回上传到OSS的地址，并根据自己的阿里OSS账号信息进行配置。

import OSS from 'ali-oss';

export default {
  ...
  methods: {
    getUploadUrl() {
      const client = new OSS({
        region: '<your region>',
        accessKeyId: '<your accessKeyId>',
        accessKeySecret: '<your accessKeySecret>',
        bucket: '<your bucket>'
      });

      return client.signatureUrl('<your object>');
    },
    ...
  }
};

在handleUpload方法中实现上传文件到OSS的逻辑。

import OSS from 'ali-oss';

export default {
  ...
  methods: {
    ...
    handleUpload() {
      ...

      const client = new OSS({
        region: '<your region>',
        accessKeyId: '<your accessKeyId>',
        accessKeySecret: '<your accessKeySecret>',
        bucket: '<your bucket>'
      });

      this.fileList.forEach((file) => {
        client.put(file.name, file).then(() => {
          // 上传成功
        }).catch((error) => {
          console.log(error);
        });
      });
    }
  }
};

总结

本文介绍了如何使用Vue3、Element Plus和阿里OSS实现文件的批量上传功能。通过选择文件或拖拽文件到上传区域，将文件上传到阿里OSS，并可以对上传成功的文件进行处理。

希望本文对你有所帮助！

Vue3 Element Plus 阿里OSS实现文件的批量上传

简介

准备工作

实现阿里OSS文件上传

总结

相似文章

评论 (0)