即使没有人为你鼓掌，也要优雅的谢幕，感谢自己的认真付出。我们未来都是巨星，别人信不信无所谓，我们自己必须坚信！
本文实例为大家分享了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实战好代码教程》
以上就是vue如何实现移动端图片上传功能。与狼共舞，必须自己成为狼，而且变成“超级狼”。更多关于vue如何实现移动端图片上传功能请关注haodaima.com其它相关文章！
