vue实现简单图片上传功能
更新时间：2022年03月02日 08:48:49 作者：Cryday
这篇文章主要为大家详细介绍了vue实现简单图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现简单图片上传的具体代码，供大家参考，具体内容如下
就是给自己留个参照，有什么不合理的地方请大家指出来，然后调整
1.效果展示
2.html相关的代码展示
<div class="form-list">
<label class="label-one">商品图片</label>
<div class="add-picture">
<ul>
<li v-if="img_li1">
<!-- 展示图片 -->
<div class="hasPic" v-if="img_1">
<img class="seledPic" :src="this.imgdata.seledPic_1" />
<img
class="closepic"
src="../../assets/images/close.png"
@click="pichide('seledPic_1')"
/>
</div>
<div class="selPic" v-else>
<label for="picadd" class="picadd"></label>
<input
id="picadd"
type="file"
maxlength
class="input-file"
multiple="multiple"
@change="onUpload($event,'seledPic_1')"
accept="image/*"
/>
</div>
</li>
<li v-if="img_li2">
<!-- 展示图片 -->
<div class="hasPic" v-if="img_2">
<img class="seledPic" :src="this.imgdata.seledPic_2" />
<img
class="closepic"
src="../../assets/images/close.png"
@click="pichide('seledPic_2')"
/>
</div>
<div class="selPic" v-else>
<label for="picadd" class="picadd"></label>
<input
id="picadd"
type="file"
maxlength
class="input-file"
multiple="multiple"
@change="onUpload($event,'seledPic_2')"
accept="image/*"
/>
</div>
</li>
<li v-if="img_li3">
<!-- 展示图片 -->
<div class="hasPic" v-if="img_3">
<img class="seledPic" :src="this.imgdata.seledPic_3" />
<img
class="closepic"
src="../../assets/images/close.png"
@click="pichide('seledPic_3')"
/>
</div>
<div class="selPic" v-else>
<label for="picadd" class="picadd"></label>
<input
id="picadd"
type="file"
maxlength
class="input-file"
multiple="multiple"
@change="onUpload($event,'seledPic_3')"
accept="image/*"
/>
</div>
</li>
</ul>
<p class="prompt">提示：最多添加3张图片，格式为jpg或png</p>
<p class="prompt" v-if="tips">店铺照片不能为空</p>
</div>
</div>3.css样式代码
.form-list {
width: 100%;
color: #666;
font-size: 16px;
margin: 0 0 20px 0;
}
.add-picture {
overflow: hidden;
}
.add-picture ul li {
float: left;
margin: 0 20px 10px 0;
}
.add-picture .hasPic,
.add-picture .selPic {
overflow: hidden;
width: 86px;
height: 86px;
border-radius: 4px;
}
.add-picture .hasPic {
position: relative;
}
.add-picture .hasPic img {
display: block;
width: 100%;
height: 100%;
}
.add-picture .hasPic img.closepic {
position: absolute;
top: 0;
right: 0;
display: block;
width: 25px;
height: 25px;
}
.add-picture .selPic .picadd {
display: block;
width: 100%;
height: 100%;
background: url("../../assets/images/picadd.png");
background-size: 100% 100%;
}
.add-picture .selPic input {
display: none;
}
.add-picture .prompt {
clear: both;
margin: 0;
font-size: 14px;
color: #ff0000;
}4、js相关代码
export default {
data() {
return {
// 上传图片标识
img_1: false,
img_2: false,
img_3: false,
imgdata: {
seledPic_1: "",
seledPic_2: "",
seledPic_3: ""
},
img_li1: true,
img_li2: false,
img_li3: false,
}
}，
methods: {
// 判断图片上传类型
produceImg(type, url) {
let that = this;
if (type == "seledPic_1") {
that.img_1 = true;
that.img_li2 = true;
that.$set(that.imgdata, "seledPic_1", url);
} else if (type == "seledPic_2") {
that.img_2 = true;
that.img_li3 = true;
that.$set(that.imgdata, "seledPic_2", url);
} else if (type == "seledPic_3") {
that.img_3 = true;
that.$set(that.imgdata, "seledPic_3", url);
}
},
// 点击关闭按钮图片隐藏
pichide(type) {
let that = this;
if (type == "seledPic_1") {
if (that.imgdata.seledPic_1 != "") {
that.img_1 = false;
that.img_li2 = false;
}
if (that.imgdata.seledPic_2 != "") {
that.img_1 = false;
that.img_li2 = true;
}
if (that.imgdata.seledPic_3 != "") {
that.img_1 = false;
that.img_li2 = true;
that.img_li3 = true;
}
} else if (type == "seledPic_2") {
if (that.imgdata.seledPic_1 != "") {
that.img_2 = false;
}
if (that.imgdata.seledPic_2 != "") {
that.img_2 = false;
that.img_li3 = false;
}
if (that.imgdata.seledPic_3 != "") {
that.img_2 = false;
that.img_li3 = true;
}
} else if (type == "seledPic_3") {
that.img_3 = false;
}
},
//start 上传图片
onUpload(e, type) {
let file = e.target.files[0];
let filesize = file.size;
let filename = file.name;
if (filesize > 10485760) {
alert("图片太大，无法上传");
} else {
let reader = new FileReader();
// 将图片转为base64位
reader.readAsDataURL(file);
reader.onload = function(k) {
// 读取到的图片base64 数据编码
var imgcode = k.target.result;
let data = {
image: imgcode
};
axios({
url: "http://………………………………",//url地址
method: "POST",
data: qs.stringify(data)
})
.then(res => {
let resdata = res.data;
if (resdata.code == 200) {
let url = resdata.info;
this.produceImg(type, url);
} else {
alert(resdata.msg);
}
})
.catch(err => {
console.log(err);
});
}.bind(this);
}
},
//end结束图片
}
} 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue Tooltip提示动态换行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
今天小编就为大家分享一篇vue点击自增和求和的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue中提示$index is not defined错误的解决方式
这篇文章主要介绍了vue中提示$index is not defined错误的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue中如何实现变量和字符串拼接，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue如何加载本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Springboot运用vue+echarts前后端交互实现动态圆环图
我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现，感兴趣的可以了解一下2021-06-06
这篇文章主要介绍了vue、element实现表格表头纵向显示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了vue2滚动条加载更多数据实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化，这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下2023-09-09
最新评论