vue+js实现微信上传图片选择功能

本文实例为大家分享了vue+js实现微信上传图片选择的具体代码，供大家参考，具体内容如下
需求：实现微信发送图片或发朋友圈选择图片功能 可实现选后点击后 选择图片标记值自减或自增
最终效果：

思路：
1、给原始数组中增加一个用于判断是否选中的状态默认为false和选中序号值 默认为空
2、定义一个选中初始值 作为计算选中值

1. data() {
2.   return {
3.    initial:0, //设置选中初始值 作为最终选择几个依据
4.    imgList:[ //初始数据
5.     {url:'',state:false,serial:'',},
6.     {url:'',state:false,serial:'',},
7.     {url:'',state:false,serial:'',},
8.     {url:'',state:false,serial:'',},
9.     {url:'',state:false,serial:'',},
10.    ]
11.   };
12. },

复制代码

3、点击选中/取消时 让对应的数据自增或自减
逻辑
1.判断所点击的项的选中状态
开始未选中 — 切换选中状态 – 默认初始值自增1 — 赋值给当前项

1. if(!item.state){ //开始未选中
2.     //点击选中,改变当前项的选中状态 设置为true
3.     item.state = true
4.     // 选中初始值 +1
5.     this.initial++
6.     // 当前项赋值=设置初始值
7.     item.serial = this.initial
8.    }```

复制代码

.选中下点击取消（状态值为true时点击）
更改选中状态 — 设置一个空值 用于接受最终几个值选中 用于更改选中初始值 — 跑循环去自减 — 判断 当前点击的选中值 和 数组中所有选中值做对比 — 数组中的选中值 大于 当前选中值 数组中大于的值自减1 – 判断数组选中状态用于统计-- 有选中则 设置控制自+1 – 给选中初始值 赋值 – 当前选中值清空

1. else { //选中下点击取消（状态值为true时点击）
2.     // 改变当前项选中状态为false
3.     item.state = false
4.     // 设置一个空值 用于接受最终几个值选中 用于更改选中初始值
5.     let xuanzhong = 0
6.     // 跑循环去自减
7.     this.imgList.forEach((items,index) => {
8.      // items = 循环所需要的每一项
9.      if(items.serial>item.serial){ //判断 当前点击的选中值 和 数组中所有选中值做对比
10.       // 数组中的选中值 大于 当前选中值 数组中大于的值自减1
11.       items.serial--
12.      }
13.      if(items.state){//判断数组选中状态用于统计
14.       // 有选中则 设置控制自+1
15.       xuanzhong ++
16.      }
17.     })
18.     // 给选中初始值 赋值
19.     this.initial=xuanzhong
20.     // 当前选中值清空
21.     item.serial = ''
22.    }

复制代码

完整代码

1. <template>
3. <div class="app">
4.   <div class="bgView">
5.    <div class="bottomView">
7.     <div class="ceshitt">
8.      <div class="imgDiv" v-for="(item,index) in imgList" :key="index">
9.       <img class="bgImg" src="../../assets/img/BGImg1.png" alt="">
10.       <div :class="['selectBox',item.state ? 'selectClass' :'']" @click="selectClick(item,index)">
11.        <p v-if="item.state">{{item.serial}}</p>
12.       </div>
13.      </div>
14.     </div>
15.    </div>
16.   </div>
18. </div>
19. </template>
21. <script>
23. export default {
24. data() {
25.   return {
26.    initial:0, //设置选中初始值 作为最终选择几个依据
27.    imgList:[ //初始数据
28.     {url:'',state:false,serial:'',},
29.     {url:'',state:false,serial:'',},
30.     {url:'',state:false,serial:'',},
31.     {url:'',state:false,serial:'',},
32.     {url:'',state:false,serial:'',},
33.    ]
34.   };
35. },
36. components: {},
37. created() {
38. },
39. mounted() {
40. },
41. methods: {
42.   selectClick(item,val){
43.    // item = 点击事件带过来整条参数
44.    // val = 所点击的下标
45.    // 逻辑 1、在原始数组中对象中增加2个值 --- 选中状态 默认false 选中值 默认'',
46.    // 判断所点击的项的选中状态
47.    if(!item.state){ //开始未选中
48.     //点击选中,改变当前项的选中状态 设置为true
49.     item.state = true
50.     // 选中初始值 +1
51.     this.initial++
52.     // 当前项赋值=设置初始值
53.     item.serial = this.initial
54.    }else { //选中下点击取消（状态值为true时点击）
55.     // 改变当前项选中状态为false
56.     item.state = false
57.     // 设置一个空值 用于接受最终几个值选中 用于更改选中初始值
58.     let xuanzhong = 0
59.     // 跑循环去自减
60.     this.imgList.forEach((items,index) => {
61.      // items = 循环所需要的每一项
62.      if(items.serial>item.serial){ //判断 当前点击的选中值 和 数组中所有选中值做对比
63.       // 数组中的选中值 大于 当前选中值 数组中大于的值自减1
64.       items.serial--
65.      }
66.      if(items.state){//判断数组选中状态用于统计
67.       // 有选中则 设置控制自+1
68.       xuanzhong ++
69.      }
70.     })
71.     // 给选中初始值 赋值
72.     this.initial=xuanzhong
73.     // 当前选中值清空
74.     item.serial = ''
75.    }
76.   },
77. },
78. };
79. </script>
81. <style scoped>
83. .ceshitt{
84. display: flex;
85. width: 100%;
86. height: 220px;
87. flex-wrap: wrap;
88. /* justify-content: space-between; */
89. }
91. .imgDiv{
92. width: 30%;
93. position: relative;
94. margin-right: 10px;
95. }
96. .bgImg{
97. position: absolute;
98. height: 100px;
99. width: 100%;
100. }
101. .selectBox{
102. width: 15px;
103. height: 15px;
104. line-height: 15px;
105. border-radius: 50%;
106. text-align: center;
107. position: absolute;
108. top: 8px;
109. right: 8px;
110. z-index: 100;
111. color:#FFF ;
112. border: 1px solid cyan;
113. }
114. .selectClass{
115. background-color:#4cc25b ;
116. }
117. </style>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。