vue element-ui Upload 上传文件图片再次封装

最新推荐文章于 2025-05-24 18:12:11 发布

置顶

NANA北极

最新推荐文章于 2025-05-24 18:12:11 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element-ui

本文链接：https://blog.youkuaiyun.com/qq_23064501/article/details/88537513

本文介绍如何对Vue中的Element-UI Upload组件进行二次封装，创建名为UploadFile的自定义组件，用于实现更便捷的文件和图片上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、添加组件名UploadFile

<template>

  <div class="upload-container">
    <el-dialog :visible.sync="dialogVisibleImg" :title="ImgName"  append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-upload :class="[disabledInput? 'upLoadShowNone':'']"
               class="upload-demo"
               :accept="accept"
               :action="UploadUrl()"
               :multiple="multiple"
               :on-remove="handleRemove"
               :on-success="handleSuccess"
               :on-preview="handlePictureCardPreview"
               :disabled="disabledInput"
               list-type="picture"
               :file-list.sync="fileList">
      <el-button :size="size" :type="type"  icon="el-icon-upload" :plain="plain">
        {
  
  {btnMSg}}
      </el-button>
      <!--<el-button size="small" type="primary" >点击上传</el-button>-->
      <!--<div