element ui 图片上传封装多张或单张_elementui 表单多图上传multiple组件封装-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45333985/article/details/107952992

本文介绍如何在Vue.js项目中封装Element UI的图片上传组件，提供多张和单张图片上传功能。通过代码示例展示了组件的使用方法，并邀请读者提问交流。

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

最近写了一个后台管理项目，发现每个后台项目都离不开上传图片，决定把上传图片做个封装，话不多说直接上代码！

组件 upload 代码块

<template>
  <div>
        <el-upload
        :action="action"
        ref="upload"
        list-type="picture-card"
        accept="image/*"
        :class="{hide:WhetherUpload||isShowUpload}"
        :limit="imgLimit"
        :file-list="fileList"
        :multiple="isMultiple"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-exceed="handleExceed"
        :on-error="imgUploadError"
        >
        <i class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview"  @click="handlePictureCardPreview(file)" >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="removeIco"  class="el-upload-list__item-delete"  @click="handleRemove(file,fileList)" >
                  <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
  </div>
</template>
<script>
export default {
   
   
    name: 'upload',
    //子组件通过 props方法获取父组件传递过来的值
    props: {
   
   
      action:{
   
   type:String},//action请求地址
      imgLimit:{
   
   type:Number,default: 1},//设置上传数量
      fileSize:{
   
   type:Number,default: 2},//设置图片大小
      fileListStr:'',//查看已上传图片
      removeIco:{
   
   type:Boolean,default:true},//是否显示删除按钮
      operationType:{
   
   type:Boolean,default:true},//刷新页面
      isShowUpload:{
   
   type:Boolean,default:false},//是否显示上传操作
    },
    data() {
   
   
        return {
   
   
            dialogImageUrl: '',
            dialogVisible: false,
            isMultiple: true,
            imgList:[],
            WhetherUpload:false,//是否显示上传操作
            fileList:[]  
        }
    },
    //通过watch来监听message是否改变
    watch:{
   
   
        'operationType':function(){
   
   
            // console.log(this.operationType)
            this.WhetherUpload = this.fileList.length >= this.imgLimi