本文实例为大家分享了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();
//表单数据
