vue上传图片时预览图片

前言：

• 图片上传时所伴随的场景之一对选择的图片在页面上先呈现出来，在此处记录一下该场景

• 功能介绍：图片预览、限制大小（5M）、重新选择图片

• 辅助：element-ui 组件库

• 话不多说先上代码

html部分（即template）

<template>
     <div class="menu-img">
        <input type="file" accept="image/*" @change="showImg()" ref="img">
        <div class="img-wrap" v-if="imgUpload.imgShow">
            <img :src="imgUpload.imgSrc" alt="">
            <i class="el-icon-refresh menu-refresh" @click="changeImg()"></i>
        </div>
        <div class="mi-tips">
            点击添加图片
            <p>（建议尺寸1280*1024，支持上传图片格式有jpg、jpeg、png、gif、webp）</p>
        </div>
    </div>
</template>

script部分

<script>
export default {
  data () {
    return {
      imgUpload: {
        imgShow: false,
        imgSrc: null
      }
    }
  },
  methods: {
    showImg () {
      var that = this
      if ((this.$refs.img.files[0].size / 1024 / 1024) > 5) {
        //组件库弹窗提示
        this.$message({
          message: '文件大小不得超过5M,请重新上传',
          type: 'warning'
        })
        //清空input选择的文件，方便重新选择
        this.$refs.img.value = ''
      } else {
        var f = new FileReader()
        f.readAsDataURL(this.$refs.img.files[0])
        f.onload = function () {
          that.imgUpload.imgSrc = f.result
        }
        //显示img
        that.imgUpload.imgShow = true
      }
    },
    changeImg () {
        //触犯input框的点击
      this.$refs.img.dispatchEvent(new MouseEvent('click'))
    }
  }
}
</script>

样式（less）

style lang="less">
.menu-img{
    position:relative;width:690px;height:390px;
    margin:100px;
    background: #eee url("../../../assets/add.png") no-repeat center 140px;
    input{
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    textarea{color: #000;}
    .mi-tips{
        position: absolute;
        top: 225px;
        width: 100%;
        text-align: center;
        text-align: center;color: #999;font-size: 15px;line-height: 20px;
        p{
            font-size: 13px;
        }
    }
    .img-wrap{
        width: 100%;height:100%;
        position: absolute;
        top: 0;left: 0;
        z-index: 4;
        &:hover{
            .menu-refresh{
                display: block;
            }
        }
    }
    img{
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    .menu-refresh{
        position: absolute;top:10px;right:10px;
        font-size: 25px;
        font-weight: bold;
        display: none;
        z-index: 4;
    }
}

效果展示

• 图片选择前：

   

• 图片选择后： 

   

思路分析：

• 将input、img占满包裹的容器、通过index层级关系控制处于最上层的是input框还是img,点击上传图片读取我文件并解析重新渲染至页面；切换图片借助函数控制触发input框的点击效果。