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);
if (adyState == 4) {
if (xhr.status == 200) {
let returnData = $.sponseText);
if (!returnData) throw new Error("上传失败SERVER");
if (!de) throw new Error("上传失败SERVER")      if (de == 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;
inputtypefile不上传文件
}
.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学习教程请阅读专题
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。