vue实现移动端图片上传功能


Posted in Javascript onDecember 23, 2019

本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下

vue实现移动端图片上传功能

<template>
 <div class="box">
 <div class="upDiv">
  {{labTex}} //标题
  //上传按钮
  <input ref="uploadInput"
    type="file"
    class='upinp'
    name="file"
    value=""
    accept="image/gif,image/jpeg,image/jpg,image/png"
    @change="selectImg($event)"/>
 </div>
 //显示上传图片的区域
 <div :class="operationShow?'operation-div':'operation-div hide'">
   <img class="shoImg" :src="imgDefault">
 </div>
 </div>
</template>
<script>
export default {
 props: {
  value:{
   type:String ,
   default:''
  },
  labTex:{
   type:String ,
   default:''
  },
  imgDefault:{
   type:String ,
   default:''
  }
 },
 data() {
  return {
   dataUrl: '',
   defaultImg:''
  }
 },
 mounted() {
  console.log(this.value)
  console.log(this.labTex)
 },
 // input的change回调第一个参数是event对象
 methods: {
  selectImg(e){
   const imgFile = e.target.files[0];
   if (imgFile)
   { 
    this.operationShow=true
    if(this.checkFile(imgFile)){
     this.upload(imgFile);
    }
   }
  
  },
  checkFile(file){
   //文件为空判断
   if (file === null || file === undefined) {
    alert("请选择您要上传的文件!");
    return false;
   }else{
    return true;
   }
   let size = Math.floor(file.size / 1024);
   // 这个条件还得改
   if (size!=0) {
    return true;
   }else{
    return false
   }
  },
  upload(file){
    try {
    let self = this;
    var result='';
    //执行上传操作
    var xhr = new XMLHttpRequest();
    xhr.open("post", ApiUrl+"/member/image/upload", true);
    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       let returnData = $.parseJSON(xhr.responseText);
       if (!returnData) throw new Error("上传失败SERVER");
       if (!returnData.code) throw new Error("上传失败SERVER")
       if (returnData.code == 200) {
        alert("上传成功")
        //显示图片地址
        self.$emit('change-img',returnData.name);
        self.defaultImg = returnData.url;
       } else {
        alert("上传失败SERVER")
       }
       console.log(""+returnDate)
      } else {
       alert("上传失败")
      }
     };
    };
    var token = getMemberToken();
    //表单数据
    var fd = new FormData();
    fd.append("token", token);
    fd.append("file", file);
    //执行发送
    result = xhr.send(fd);
   } catch (e) {
    console.log(e);
    alert(e);
   }
  }
 }
}
</script>
<style>
.box {
 height: 11rem;
 margin-top: 0.5rem;
}
.upDiv{
 position:relative;
 height:1.2rem;
 width:100%;
 margin-bottom:0.08rem;
 width:5.5rem;
 text-align: center;
 z-index:10;
 font-size: 0.6rem;
 padding: 0 0.2rem;
 border-radius: 0.2rem;
 border-radius: 0.4rem;
 color: #fff;
 border: none;
 height: 1.2rem;
 line-height: 1.2rem;
 display: inline-block;
 background: #0097ffd9;
}
.operation-div{
 width: 15rem;
 height: 9.2rem;
}
.operation-div img{
 width:100%;
 height:100%;
}
.upDiv .upinp{
 position:absolute;
 left:0px;
 right:0px;
 right:0px;
 bottom:0px;
 z-index:1;
 opacity:0;
}
.shoImg{
 width:15rem;
 border-radius:0.05rem
}
</style>

在页面当中的使用:

<upload-img 
  :lab-tex="`上传银行卡正面`"
  :img-default="imgFourDefault"
  v-on:change-img="chooseFourImg"
></upload-img>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
异步加载script的代码
Jan 12 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
javascript操作数组详解
Dec 17 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
node.js文件上传处理示例
Oct 27 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue实现拖拽效果
Dec 23 #Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 #Javascript
Angular如何由模板生成DOM树的方法
Dec 23 #Javascript
You might like
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery中$each()方法的使用指南
2015/04/30 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
nodejs基础知识
2017/02/03 NodeJs
vue环境搭建简单教程
2017/11/07 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python创建日历实例
2014/08/21 Python
详解Python中的type()方法的使用
2015/05/21 Python
Python生成随机数组的方法小结
2017/04/15 Python
目前最全的python的就业方向
2018/06/05 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Weblogic的布署方式
2013/08/23 面试题
联强国际笔试题面试题
2013/07/10 面试题
Java基础类库面试题
2013/09/04 面试题
保护环境建议书400字
2014/05/13 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python