vue3+ts - element-plus封装上传文件图片组件

紫菀檀ss

码龄10年

关注

VIP免费原创最新推荐文章于 2026-06-28 09:03:54 发布 7.1k 阅读

本文为博客 VIP 文章，开通 VIP 后可阅读全文

开通 VIP

近期做到的项目中有涉及到上传图片上传文件的需求，因为是pc管理后台，用到了element-plus框架，所以我也一起使用element-plus中的上传图片上传图片功能，并对它进行封装成一个组件，方便在多个地方使用。

一、效果图

1、上传文件、视频

在这里插入图片描述

2、上传图片

在这里插入图片描述

二、代码分析及全部代码

在这里上传图片和文件是分成了两个组件进行封装的，因为项目需求要求不一致，所以分开了，大家使用时有需要的话可以将它们合并到一起。

1、上传文件相关代码

<template>
  <div class="upload_wrap">
    <el-upload
      v-if="!props.isDisableUpload"
      class="upload"
      ref="uploadRef"
      :file-list="waitFileList"
      :multiple="props.isMultiple"
      :limit="props.limitNum"
      :accept="props.acceptType"
      :auto-upload="false"
      :show-file-list="false"
      :disabled="props.isDisableUpload"
      :on-change="handleChange"
    >
      <div class="el-upload__text">
        <img src="@/assets/images/icon_upload.png" />
        <span>上传文件</span>
      </div>
    </el-upload>
    <div class="template_list">
      <div class="template" v-for="(item, index) in waitFileList" :key="index">
        <span>
          <img src="@/assets/images/icon_link.png" />
        </span>
        <span class="documentName">{
   
   {
   
    item.name }}</span>
        <span v-if="!props.isDisableUpload">
          <el-icon color="#000000a6" size="16" @click="removeFile(item)"
            ><Close
          /></el-icon>
        </span>
        <span v-if="isDownLoad" style="paddingleft: 5px">
          <img
            src="@/assets/images/icon_download.png"
            @click="handleDownLoad(item)"
          />
        </span>
      </div>
    </div>
    <span class="tips" v-if="!props.isDisableUpload"
      >支持{
   
   {
   
    acceptTypeDesc }}；文件大小不能超过{
   
   {
   
    props.maxFileSize }}M</span
    >
  </div>
</template>

<script lang="ts" setup>
import {
   
    ref, watch } from "vue";
import {
   
    ElLoading, ElMessage } from "element-plus";
import {
   
    request } from "@/api/axios";
import {
   
    Close } from "@element-plus/icons-vue";
const emits = defineEmits(["fileSuccess", "fileRemove"]);
interface Props {
   
   
  acceptType?: string; // 上传文件类型
  acceptTypeDesc?: string; // 描述 - 上传文件类型
  isMultiple?: boolean; //   是否可批量上传
  limitNum?: number; // 允许上传文件的最大数量
  isDisableUpload?: boolean; // 是否禁用上传
  maxFileSize?: number; // 文件大小
  action?: string;
  fileList?: any; // 回显的文件
  isDownLoad?: boolean; // 是否可以下载
}
// 接收父组件传递过来的参数
const props = withDefaults(defineProps<Props>(), {
   
   
  acceptType: ".xls,.doc",
  acceptTypeDesc: "doc/xls",
  isMultiple: true,
  limitNum: 10,
  isDisableUpload: false,
  maxFileSize: 10,
  action: "/activity/resource/uploadFile",
  fileList: [],
  isDownLoad: false,
})<