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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
smarty中常用方法实例总结
2015/08/07 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
php-fpm中max_children的配置
2019/03/15 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js中indexof的用法详细解析
2013/12/24 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
seajs下require书写约定实例分析
2018/05/16 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python之Character string(实例讲解)
2017/09/25 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python如何执行系统命令
2020/09/23 Python
Python实现EM算法实例代码
2020/10/04 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
平面设计师工作职责范文
2013/12/03 职场文书
初中生操行评语大全
2014/04/24 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
学子宴致辞大全
2015/07/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
请假条应该怎么写?
2019/06/24 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书