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 相关文章推荐
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
Javascript的闭包详解
Dec 26 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
leaflet的开发入门教程
Nov 17 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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数据加密详解
2013/06/18 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
Symfony控制层深入详解
2016/03/17 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
js jquery数组介绍
2012/07/15 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
vue自定义全局共用函数详解
2018/09/18 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
Python星号*与**用法分析
2018/02/02 Python
python实现二维插值的三维显示
2018/12/17 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python命令行参数用法实例分析
2019/06/25 Python
wxpython布局的实现方法
2019/11/01 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
医药专业推荐信
2013/11/15 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
升学宴答谢词
2015/01/05 职场文书