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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js预加载图片方法汇总
Jun 15 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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代码
2012/06/08 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python 常用的基础函数
2018/07/10 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python如何调用java类
2020/07/05 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python的setattr函数实例用法
2020/12/16 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
PHP笔试题
2012/02/22 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
销售代表求职自荐信
2013/10/01 职场文书
学习新党章思想汇报
2014/01/09 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书