vue 引入图片,vue怎么去做上传图片功能
本文主要详细介绍vue js对微信上传图片选择功能的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue js实现微信上传图片选择的具体代码，供大家参考。具体内容如下
需求：可实现微信发图或朋友圈选图功能，选择点击后可自动降低或增加所选图片的标记值。
最终效果：
思路：
1.在原数组上加一个状态，用于判断是否被选中，选中序号默认值为假，为空。
2.将选定的初始值定义为计算的选定值。
data() {
返回{
Initial:0，//设置选择的初始值作为最终选择的依据。
ImgList:[ //初始数据
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
]
};
},
3.单击〖选择〗/〖取消〗按钮，相应的数据会自动增加或减少。
逻辑
1.判断点击项目的选择状态。
最初未选中-切换选中状态-默认初始值增加1-分配给当前项目。
如果(！Item.state){ //最初没有选择
//点击“选择”，将当前项目的选中状态改为true。
item.state=true
//检查初始值1
this.initial
//当前项赋值=设置初始值
item.serial=this.initial
}```
2.选中时单击取消(当状态值为真时单击)
更改选定的状态-设置空值以接受最后几个值，选择它以更改选定的初始值-运行循环并从中减去-确定当前单击的选定值与数组中所有选定的值进行比较-数组中的选定值大于当前选定值，并从中减去1-确定数组的选定状态以进行统计-如果选择了控件，则从1开始设置控件-将值分配给选定的初始值-清空当前选定值。
Else {//选中时单击取消(当状态值为真时单击)
//将当前项目的选定状态更改为false
item.state=false
//设置空值接受最后几个值，检查改变检查的初始值。
设宣忠=0
//运行循环减少自身。
this.imgList.forEach((items，index)={
//items=循环所需的每一项
If(items.serialitem.serial){ //判断当前点击的选中值，并与数组中所有选中值进行比较。
//如果数组中选定的值大于当前选定的值，数组中大于的值将减1。
项目.序列-
}
If(items.state){//确定要统计的数组的选定状态
//如果选中，则从1开始设置控件。
宣忠
}
})
//为选定的初始值赋值
this.initial=宣忠
//清除当前选择的值。
item.serial=
}
完全码
模板
div class=" app "
div class=bgView
div class=bottomView
div class=ceshitt
v-for=(item，index) in imgList :key=index
img class=bgImg src=././assets/img/BGImg1.png alt=
div :class=[selectBox ，item.state？select class : ] @ click= select click(item，index)
p v-if= item . state“{ item . serial } }/p
/div
/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
Initial:0，//设置选择的初始值作为最终选择的依据。
ImgList:[ //初始数据
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
{url:，状态：假，序列： ，}，
]
};
},
组件：{}，
已创建(){
},
已安装(){
},
方法：{
选择单击(项目，值){
//item=点击事件带来整个参数。
//val=下标被点击。
//逻辑1。向原始数组中的对象添加两个值——在选定状态下默认为false，在选定值下默认为，
//判断点击项的选中状态。
如果(！Item.state){ //最初没有选择
//点击“选择”，将当前项目的选中状态改为true。
item.state=true
//检查初始值1
this.initial
//当前项赋值=设置初始值
item.serial=this.initial
}else {//选中时单击取消(当状态值为真时单击)
//将当前项目的选定状态更改为false
item.state=false
//设置空值接受最后几个值，检查改变检查的初始值。
设宣忠=0
//运行循环减少自身。
this.imgList.forEach((items，index)={
//items=循环所需的每一项
If(items.serialitem.serial){ //判断当前点击的选中值，并与数组中所有选中值进行比较。
//如果数组中选定的值大于当前选定的值，数组中大于的值将减1。
项目.序列-
}
If(items.state){//确定要统计的数组的选定状态
//如果选中，则从1开始设置控件。
宣忠
}
})
//为选定的初始值赋值
this.initial=宣忠
//清除当前选择的值。
item.serial=
}
},
},
};
/脚本
样式范围。切希特
显示器：flex
宽度：100%；
高度：220px
flex-wrap:缠绕；
/* justify-content:space-between；*/
}。imgDiv{
宽度：30%；
位置：相对；
右边距：10px
}。bgImg{
位置：绝对；
高度：100px
宽度：100%；
}。选择框{
宽度：15px
高度：15px
行高：15px
边界半径：50%；
文本对齐：居中；
位置：绝对；
top:8px；
右：8px
z指数：100；
颜色：# FFF；
边框：1px纯青；
}。选择类别
背景色：# 4cc25b
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。