Vue上传图片,vue多图上传
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单图片上传的具体代码，供大家参考，具体内容如下
就是给自己留个参照，有什么不合理的地方请大家指出来，然后调整
1.效果展示
2.html相关的代码展示
div class=form-list
标签类=标签一商品图片/标签
div class=添加图片
保险商实验所
li v-if=img_li1
！-展示图片-
div class=hasPic v-if=img_1
img class=" seled pic ":src= this。img数据。seled pic _ 1 /
图片
“近景”
src=././assets/images/close.png
@click=pichide(seledPic_1 )
/
/div
div class=selPic v-else
的标签=picadd class=picadd/label
投入
id=picadd
type=file
maxlength
class=输入文件
倍数=倍数
@change=onUpload($event， seledPic_1 )
accept=image/*
/
/div
/李
li v-if=img_li2
！-展示图片-
div class=hasPic v-if=img_2
img class=" seled pic ":src= this。img数据。seled pic _ 2 /
图片
“近景”
src=././assets/images/close.png
@click=pichide(seledPic_2 )
/
/div
div class=selPic v-else
的标签=picadd class=picadd/label
投入
id=picadd
type=file
maxlength
class=输入文件
倍数=倍数
@change=onUpload($event， seledPic_2 )
accept=image/*
/
/div
/李
李v-if=img_li3
！-展示图片-
div class=hasPic v-if=img_3
img class=" seled pic ":src= this。img数据。seled pic _ 3 /
图片
“近景”
src=././assets/images/close.png
@click=pichide(seledPic_3 )
/
/div
div class=selPic v-else
的标签=picadd class=picadd/label
投入
id=picadd
type=file
maxlength
class=输入文件
倍数=倍数
@change=onUpload($event， seledPic_3 )
accept=image/*
/
/div
/李
/ul
p class=提示提示：最多添加3张图片，格式为使用联合图象专家组文件交换格式存储的编码图像文件扩展名或巴布亚新几内亚/菲律宾
提示店铺照片不能为空/p
/div
/div
3.css样式代码。表单列表{
宽度：100%;
颜色：# 666;
字体大小：16px
边距：0 0 20px 0
}。添加图片{
溢出：隐藏；
}。添加图片ul li {
浮动：左；
边距：0 20px 10px 0
}。添加图片。哈斯皮克，添加图片100 .塞尔皮克
溢出：隐藏；
宽度：86px
高度：86px
边框-半径：4px
}。添加图片。哈斯皮克{
位置：相对；
}。添加图片hasPic img {
显示：块；
宽度：100%;
身高：100%;
}。添加图片hasPic img.closepic {
位置：绝对；
top:0；
右：0;
显示：块；
宽度：25px
高度：25px
}。添加图片。塞尔皮克picadd {
显示：块；
宽度：100%;
身高：100%;
背景：url(././资产/图像/picadd。png’)；
背景尺寸：100% 100%;
}。添加图片100 .塞尔皮克输入{
显示：无；
}。添加图片。提示{
明确：两者都有；
边距：0;
字体大小：14px
颜色：# ff0000
}
4、js相关代码
导出默认值{
data() {
返回{
//上传图片标识
img_1:假，
img_2:假，
img_3:假，
imgdata: {
seledPic_1: ，
seledPic_2: ，
seledPic_3:" "
},
img_li1:真，
img_li2: false，
img_li3:假的，
}
},
方法：{
//判断图片上传类型
produceImg(类型，网址){
让那个=这个；
if (type==seledPic_1) {
that.img _ 1=true
that.img _ li2=true
那个. set(that.imgdata， seledPic_1 ，URL)；
} else if (type==seledPic_2) {
that.img _ 2=true
that.img _ li3=true
那个. set(that.imgdata， seledPic_2 ，URL)；
} else if (type==seledPic_3) {
that.img _ 3=true
那个. set(that.imgdata， seledPic_3 ，URL)；
}
},
//点击关闭按钮图片隐藏
皮奇德(类型){
让那个=这个；
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
}
},
//开始上传图片
onUpload(e，type) {
设file=e . target。文件[0]；
设filesize=file.size
让文件名=文件名
如果(文件大小10485760) {
警报(图片太大，无法上传);
}否则{
let reader=new FileReader()；
//将图片转为base64位
reader.readAsDataURL(文件);
reader.onload=function(k) {
//读取到的图片base64数据编码
var img代码=k .目标。结果；
let data={
图片：imgcode
};
axios({
url: http://………………………………，//url地址
方法： POST ，
数据：qs.stringify(数据)
})。然后(res={
设resdata=res.data
if (resdata.code==200) {
设URL=RES数据。信息；
this.produceImg(类型，网址)；
}否则{
警报(resdata。味精)；
}
})。接住(错误={
控制台。日志(错误)；
});
}.绑定（这个);
}
},
//结束结束图片
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。