基于 vue3+vite+element-plus+el-upload 封装的上传组件

介绍

基于 Vue3、Vite、Element Plus 及 El-Upload 打造的高效上传组件，适用于现代 Web 应用，提供简便快捷的文件上传体验。

安装教程

1. npm install

使用说明

1. 暴露的方法为 fileChange
2. 传递的参数如下

const props = defineProps({
  uploadType: {
    //上传类型：button-按钮型，box-框型
    type: String,
    default: "button",
  },
  fileList: {
    //默认文件列表
    type: Array,
    default: () => [
      {
        url: "",
        name: "文件名称",
      },
    ],
  },
  limit: {
    //上传数量限制
    type: Number,
    default: 1,
  },
  multiple: {
    //是否多选
    type: Boolean,
    default: false,
  },
  uploadAction: {
    //上传地址
    type: String,
    default: "",
  },
  acceptList: {
    //文件类型限制
    type: Array,
    default: () => [".jpg", ".png"], //文件类型数组 ['.jpg', '.png']，注意：上传类型为box模式下只能配置上传图片的格式，其它比如.rar不生效
  },
  buttonName: {
    //上传按钮的名字
    type: String,
    default: "图片",
  },
  fileSize: {
    //单个上传文件的大小MB
    type: Number,
    default: 30,
  },
  token: {
    //token
    type: String,
    default: "",
  },
});

<template>
  <div class="card-box">
    <h5>按钮上传</h5>
    <div class="upload-main">
      <AqElUpload @fileChange="getFileData" :fileList="fileList" :multiple="true" :limit="1"
        :acceptList="['.jpg', '.png', '.pdf', '.word', '.excel']" :fileSize="10" uploadAction="/api/web/duty/upload"
        buttonName="文件" :token="token" />
    </div>
    <h5>框上传</h5>
    <div class="upload-main">
      <AqElUpload @fileChange="getFileData" :fileList="fileList" :multiple="true" :limit="5"
        :acceptList="['.jpg', '.png']" :fileSize="20" uploadAction="/api/web/risks/upload" uploadType="box"
        :token="token" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AqElUpload from 'aq-el-upload';
import storage from '@/utils/storage.js';

const token = storage.sessionStorage.get('token');

const fileList = ref([]);
const getFileData = (val) => {
  console.log("接收的图片地址", val);
};
</script>

<style lang="scss" scoped>
h5 {
  margin: 40px 0 20px;
}
</style>

参与贡献

1. 2025-03-12
2. 阿秋（杰尼斯邦邦）