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 相关文章推荐
js href的用法
May 13 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue项目实战总结篇
Feb 11 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Vue简单实现原理详解
May 07 Javascript
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
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python map比for循环快在哪
2020/09/21 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
英语感恩演讲稿
2014/01/14 职场文书
竞选学委演讲稿
2014/09/13 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
税务会计岗位职责
2015/04/02 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android