vue.js 图片上传并预览及图片更换功能的实现代码


Posted in Javascript onAugust 27, 2018

这里讲解是图片上传和图片预览。主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果

效果图:

vue.js 图片上传并预览及图片更换功能的实现代码vue.js 图片上传并预览及图片更换功能的实现代码

样式以及效果图一并展示

1.HTML

<div class="rz-picter">
             <img :src="avatar" class="img-avatar">
  <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic">
  </div>

2.js

data() {
       return {
         avatar: require('../assets/jia.jpg'),
      }
     },

图片一定要以require 的方式引入 这里的图片仅用来美化 并不是上传的图片

3.js 写方法

changeImage(e) {
         var file = e.target.files[0]
         var reader = new FileReader()
         var that = this
         reader.readAsDataURL(file)
         reader.onload = function(e) {
           that.avatar = this.result
         }
       },

就这么几段代码一个上传功能就写好了

4.切记我这里用了css来将input  type = file 的样式重新优化了,并且将图片做了定位 所以点击中间图片就可以触发上传

vue.js 图片上传并预览及图片更换功能的实现代码

你需要你的需求去定义你的样式

5.运用原生javascript我做了一个判断图片是否上传的的判断

if(document.getElementById('uppic').value.length == '') {
           Toast('请上传图片');
           return
 }

6.附上css代码

.uppic {
     height: 3rem;
     width: 6rem;
     margin: 0 auto;
     opacity: 0;
     z-index: 99999;
   }
   .img-avatar {
     position: absolute;
   }

附上写此功能所有代码

<template>
 <div class="renzheng">
 <div class="rz-notice" v-bind:style="{ display: isno}">
  <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
 </div>
 <van-tabs v-model="active" swipeable>
  <van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab">
  <div v-if="index==0">
   <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人名片照片</div>
   <div class="rz-picter">
   <img :src="avatar" class="img-avatar">
   <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic">
   </div>
   <div class="cuxian"></div>
   <div class="my-content-list">
   <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div>
   </div>
   <div class="my-content-list">
   <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" max="11" v-model="yoursphone" placeholder="请输入您的手机号码" /></div>
   </div>
   <div class="yzbtn" @click="submitBtn">
   立即认证
   </div>
  </div>
  <div v-if="index==1">
   <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人身份证照片</div>
   <div class="rz-picter">
   <img src="../assets/jia.jpg" />
   <p>上传人像页</p>
   </div>
   <div class="rz-picter">
   <img src="../assets/jia.jpg" />
   <p>上传国辉页</p>
   </div>
   <div class="cuxian"></div>
   <div class="my-content-list">
   <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输入您的真实姓名" /></div>
   </div>
   <div class="my-content-list">
   <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" placeholder="请输入您的手机号码" /></div>
   </div>
   <div class="yzbtn">
   立即认证
   </div>
  </div>
  </van-tab>
 </van-tabs>
 </div>
</template>
<script>
 import { Tab, Tabs } from 'vant';
 import { Toast } from 'vant'
 export default {
 name: 'renzheng',
 data() {
  return {
  yoursname: '',
  yoursphone: '',
  avatar: require('../assets/jia.jpg'),
  isno: 'block',
  active: 0,
  navArr: [{
   name: "身份认证"
   },
   {
   name: "实名认证"
   }
  ],
  }
 },
 methods: {
  hiddenwords() {
  this.isno = 'none'
  },
  submitBtn() {
  if(this.yoursname == '') {
   Toast("请填写你的真实姓名");
   return;
  }
  if(this.yoursphone == '' || this.yoursphone == null) {
   Toast("请填写你的手机号码");
   return;
  }
  if(document.getElementById('uppic').value.length == '') {
   Toast('请上传图片');
   return;
  }
  },
  changeImage(e) {
  var file = e.target.files[0]
  var reader = new FileReader()
  var that = this
  reader.readAsDataURL(file)
  reader.onload = function(e) {
   that.avatar = this.result
  }
  },
 },
 mounted: function() {
 }
 }
</script>
<style>
 .rz-notice {
 padding: 0.2rem 0.3rem;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 background: #F0F5FB;
 color: #28D9EF;
 }
 
 .rz-notice img {
 height: 0.22rem;
 width: 0.22rem;
 }
 
 .rz-picter {
 height: 3rem;
 width: 6rem;
 margin: 0.3rem auto;
 border: 0.01rem solid #ededed;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 
 .uppic {
 height: 3rem;
 width: 6rem;
 margin: 0 auto;
 opacity: 0;
 z-index: 99999;
 }
 .img-avatar {
 position: absolute;
 }
 /*立即验证*/
 
 .yzbtn {
 width: 90%;
 height: 0.8rem;
 background: #FF6600;
 border-radius: 0.06rem;
 margin: 30px auto;
 text-align: center;
 line-height: 0.8rem;
 color: #FFFFFF
 }
 
 
 /*修改原有tab样式*/
 
 .van-tab {
 color: #A3A3A3!important;
 }
 
 .van-tab--active {
 color: #000!important;
 }
 
 .van-tabs__line {
 background-color: #FF6600!important;
 width: 0.7rem!important;
 text-align: center!important;
 align-items: center;
 margin-left: 1.5rem;
 }
 
 .van-toast {
 background-color: #FF6600;
 color: #FFFFFF
 }
 
 .my-content-list {
 padding: 0.3rem;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 border-bottom: 0.01rem solid #EDEDED;
 }
</style>

总结

以上所述是小编给大家介绍的vue.js 图片上传并预览及图片更换功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
深入浅析React中diff算法
May 19 Javascript
JS常见构造模式实例对比分析
Aug 27 #Javascript
Vue.js图片预览插件使用详解
Aug 27 #Javascript
JavaScript中创建原子的方法总结
Aug 26 #Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 #Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 #Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 #Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
详解Node 定时器
2018/02/26 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python多线程方式执行多个bat代码
2016/06/07 Python
Python 装饰器深入理解
2017/03/16 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
事业单位个人总结
2015/02/12 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
只用Python就可以制作的简单词云
2021/06/07 Python
python中filter,map,reduce的作用
2022/06/10 Python