elementUI中Upload 上传图片，上传成功之后。鼠标移入图片位置出现放大和删除按钮

本文主要是介绍elementUI中Upload 上传图片，上传成功之后。鼠标移入图片位置出现放大和删除按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、未上传图片时样式

2、上传成功之后样式

   2-1、删除效果

  

  2-2放大效果

3、代码部分

 3-1、组件封装（子组件）

<template>

<div class="uploadSing">

  <el-upload v-if="ossUpload" 

    v-loading="loading"

    class="avatar-uploader"

    :action="action"

    :show-file-list="false"

    :disabled="imageUrl ? true : false"

    :data="data"

    :headers="headers"

    :on-error="onError"

    :on-progress="handleProgress"

    :on-success="handleAvatarSuccess"

    :before-upload="beforeUpload">

    <img v-if="imageUrl" :src="imageUrl" class="avatar">

    <div v-if="imageUrl" class="el-upload-list__item-actions">

      <span class="el-upload-list__item-preview" @click="handlePictureCardPreviews">

        <i class="el-icon-zoom-in"></i>

      </span>

      <span v-if="delBtnImgFlag" class="el-upload-list__item-preview" @click="handleRemoves">

        <i class="el-icon-delete"></i>

      </span>

    </div>

  

这篇关于elementUI中Upload 上传图片，上传成功之后。鼠标移入图片位置出现放大和删除按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---