uni实现发表评价的上传图片

效果：

 

 

结构代码：

 1 <!-- 4、上传图片 -->
 2                     <view class="addbox1_son2">
 3                         <view class="pic-box">
 4                             <view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
 5                                 <!-- 删除按钮 -->
 6                                 <view class="delbtn" @tap="delpic(picindex)"></view>
 7                                 <image :src="picitem" ></image>
 8                             </view>
 9                             <view v-show="picArr.length<5" class="pic-box-son" @tap="sendImg">
10                                 <view>点击<br>上传图片</view>
11                                 <view>（最多5张）</view>
12                             </view>
13                         </view>
14                     </view>

样式：

 1     .addbox1_son2 {
 2         width: 750rpx;
 3         display: flex;
 4         flex-wrap: wrap;
 5         /* flex-direction: row; */
 6         /* align-items: center; */
 7         padding-top: 20rpx;
 8         padding-bottom: 20rpx;
 9         border-bottom: 2rpx solid rgba(0,0,0,.1);
10     }
11 
12     .pic-box {
13         width: 750rpx;
14         display: flex;
15         flex-wrap: wrap;
16         align-items: center;
17         /* justify-content: center; */
18     }
19     .pic-box-son {
20         display: flex;
21         flex-direction: column;
22         align-items: center;
23         justify-content: center;
24         margin-left: 20rpx;
25         margin-bottom: 20rpx;
26         width: 152rpx;
27         height: 152rpx;
28         padding: 4rpx;
29         border-radius: 6rpx;
30         border: 2rpx dashed rgba(0,0,0,.2);
31     }
32     .pic-box-son image {
33         width: 100%;
34         height: 100%;
35         border-radius: 6rpx;
36     }
37     .pic-box-son>view:first-child {
38         font-size: 28rpx;
39         color: #565656;
40         text-align: center;
41     }
42     .pic-box-son>view:last-child  {
43         font-size: 24rpx;
44         color: #a7a7a7;
45         text-align: center;
46     }
47 
48     .delbtn {
49         width: 100%;
50         position: relative;
51         text-align: center;
52         line-height: 32rpx;
53         font-size: 46rpx;
54     }
55     .delbtn::before {
56         position: absolute;
57         content: '-';
58         background-color: #ff9000;
59         color: #fff;
60         width: 36rpx;
61         height: 36rpx;
62         border-radius: 50rpx;
63         top: 6rpx;
64         right: 6rpx;
65         z-index: 99;
66     }

 

 

 

 

 methods里面的功能：

 1 // 上传图片
 2             sendImg: function(){
 3                 let num = 5 - this.picArr.length;
 4                 let count = num;  // 自定义一次性最多可选几张
 5                 uni.chooseImage({
 6                     count: count, //默认9
 7                     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 8                     sourceType: ['album'], //从相册选择
 9                     success: (res) => {
10                         const filePaths = res.tempFilePaths;
11                         let selected = this.picArr
12                         for(let i = 0;i<filePaths.length;i++){
13                             this.picArr.unshift(filePaths[i])
14                         }
15                         // console.log(this.picArr)
16                     }
17                 });
18             },
19             // 删除当前图片
20             delpic: function(index){
21                 // console.log(index)
22                 this.picArr.splice(index,1)
23             }

 

 
posted @ 2022-05-31 15:54  宅女二二  阅读(205)  评论(0)    收藏  举报