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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php实现简单洗牌算法
2013/06/18 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
js防止页面被iframe调用的方法
2014/10/30 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS实现复制功能
2017/03/01 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
Vue基础配置讲解
2019/11/29 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python str与repr的区别
2013/03/23 Python
Django返回json数据用法示例
2016/09/18 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python async with和async for的使用
2019/06/20 Python
pandas数据处理进阶详解
2019/10/11 Python
parser.add_argument中的action使用
2020/04/20 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python pip如何手动安装二进制包
2020/09/30 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
美发活动策划书
2014/01/14 职场文书
会计专业自我评价
2014/02/12 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
js不常见操作运算符总结
2021/11/20 Javascript