vue上传图片，图片预览显示的方法

最新推荐文章于 2024-08-06 17:41:12 发布

terryMei

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量6.5k

点赞数

分类专栏：学习笔记文章标签： vue vue上传图片 vue图片预浏览

本文链接：https://blog.csdn.net/terryMei/article/details/83105157

版权

在Vue项目中，图片上传通常涉及两个步骤：本地图片获取并预览，然后上传到服务器。通过input元素的change事件可以监听文件选择，实现实时预览功能。

摘要由CSDN通过智能技术生成

在vue项目中，经常有图片上传的功能，类似微博的发表动态，都需要插入图片，其实我们需要做的就是两步：
1.获得本地图片，显示在页面；
2.上传图片到服务器

<div>
      <div class="fl width-28per pos-relative" style="height: 80px;width: 80px">
        <img src="static/img/test.png" class="width-100per border-rad-5">
          <!--绑定src为了动态显示，v-show，当没有headimg的时候将这个图片坑隐藏-->
        <img :src="headimg" class="width-100per border-rad-5" style="z-index: 98;position: absolute;top:0;left: 0;width: 80px;height: 80px;" v-show="has_headurl">
        <input type="file"  @change="getImgBase()" accept="image/*" style="position: absolute;top:0;left: 0;width: 100%;height: 100%;z-index: 99;opacity: 0">
      </div>

input绑定change事件