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

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实战教程》