vue实现移动端图片上传功能
程序员文章站
2022-04-09 16:28:56
本文实例为大家分享了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);
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父子组件通信的高级用法示例