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

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

本文实例为大家分享了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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。