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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
栏 目:JavaScript
下一篇:webpack打包html里面img后src为“[object Module]”问题
本文标题:vue实现移动端图片上传功能
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9417.html
您可能感兴趣的文章
- 04-02java后端代码分页 java后端实现分页page
- 01-10Echarts实现单条折线可拖拽效果
- 01-10在Vue项目中使用Typescript的实现
- 01-10js实现上传图片并显示图片名称
- 01-10Vue中使用Lodop插件实现打印功能的简单方法
- 01-10echarts实现折线图的拖拽效果
- 01-10d3.js实现图形缩放平移
- 01-10小程序简单两栏瀑布流效果的实现
- 01-10H5实现手机拍照和选择上传功能
- 01-10Echarts实现多条折线可拖拽效果
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 04-02jquery与jsp,用jquery
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-11ajax实现页面的局部加载
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-10delphi制作wav文件的方法
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-10SublimeText编译C开发环境设置
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10C#中split用法实例总结