vue+input file上传图片并以圆形展示代码分享（升级版增加遮罩）

TwoBE9876

已于 2022-04-01 14:53:38 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

于 2022-04-01 14:25:56 首次发布

本文链接：https://blog.youkuaiyun.com/TwoBE9876/article/details/123897001

javascript 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文分享了一个使用Vue.js实现图片上传的功能，并将上传的图片以圆形展示的代码实现，同时还增加了遮罩效果。通过html、css和javascript的结合，为用户提供了一种优雅的图片预览体验。

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

html

<div class="upload">
     <img id="img" width="100%" height="90%" :src="oneUrl" alt="头像">
     <input type="file" name="file" id="file" @change="getImgURL" title=''>
</div>

升级版html（新增遮罩）

<div class="upload">
    <img id="img" width="100%" height="90%" :src="oneUrl" alt="头像">
    <div class="mask">点击上传头像</div>
    <input type="file" name="file" id="file" @change="getImgURL" title="">
</div>

css

.upload{
      width: 80px;
      height: 80px;
      border: #fff 1px solid;
      overflow: hidden;
      border-radius: 40px;
      position: relative;
//这是为了居中
      left: calc(50% - 25px);
      #file{
        width: 100%;
        height: 100%;
//将按钮覆盖图片
        position: absolute;
        right: 0;
//透明度调为全透明
        opacity:0;
      }
    }

升级版css

.upload{
      width: 100px;
      height: 100px;
      border: #fff 1px solid;
      overflow: hidden;
      border-radius: 50px;
      position: relative;
      left: calc(50% - 50px);
      #file{
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        opacity:0;
      }
      .mask{
        line-height: 100px;
        text-align: center;
        color: #fff;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 0px;
        background-color: transparent;
      }
    }
    .upload:hover .mask{
      height: 100%;
      transition: height 500ms;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.4);
    }

js（无变化）

getImgURL (event) {
      // 获取上传的文件对象file
      let file = event.target.files[0]
      // 获取文件的后缀名，用以判断文件类型是否为图片
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileType === 'jpg' || fileType === 'png' ||fileType === 'jpeg' ||fileType === 'JPG') {
        // 判断文件大小
        const size = file.size / 1024 / 1024
        if (size > 1) {//size的单位为M
          this.$message({
            type: 'warning',
            message: '文件大小不能超过1M'
          })
          return false
        }
        // FileReader对象用于读取文件
        const r = new FileReader()
        // onload方法将会在文件读取完成后运行
        r.onload = () => {
          // 将base64编码赋值给页面img的src绑定的值
          this.oneUrl = r.result
        }
        // 读取blob或file文件对象，其中r.result是读取文件的base64编码
        r.readAsDataURL(file)
      } else {
        this.$message({
          type: 'warning',
          message: '文件格式不符，请重新选择'
        })
        return false
      }
    },