上传多张图片的布局 flex布局 uniapp

 1 <view class="input " style="display: flex;">
 2                 <span class="title" style="font—size: 16px;">图像信息：</span>
 3                 <view class="context" >

　　　　　　　　　　　　　　//主要部分
 7                     <view class="wrap  input-border">
 8                         <view class="img-wrap" v-for="(item, index) in uploadDatas">
 9                             <image class="image" @tap="previewUpload" :src="item" :data-url="item" mode="aspectFill">
10                             </image>
　　　　　　　　　　　　　　　　　　　　//删除按钮
11                             <text class="diy-icon-close" @tap="uploadDatas.splice(index, 1)"></text>
12                         </view>
13                         <view class="upload-box" @tap="uploadImg">
14                             <text class="diy-icon-cameraadd"></text>
15                         </view>
16                         <input hidden :value="upload" name="upload" maxlength="-1" />
17                     </view>

18                 </view>
20             </view>

 1 export default {
 2         data() {
 3             return {
 4                 uploadDatas: [],
 5                    }
 6         }
 7         methods:{
 8              previewUpload(e) {
 9              　　console.log('预览', e);
10              　　uni.previewImage({
11                　　  current: e.currentTarget.dataset.url, // 当前显示图片的http链接
12                　　  urls: [e.currentTarget.dataset.url] // 需要预览的图片http链接列表
13              　　});
14             },
15                         //上传
16             uploadUpload(e) {
17                 this.uploadImage(this, 'upload');
18             }, 
19               
20 }
21 }                

 1 .wrap {
 2         display: flex;
 3         flex-wrap: wrap;
 4     }
 5 
 6     .img-wrap {
 7         position: relative;
 8         display: flex;
 9         flex-direction: row;
10         flex-wrap: wrap;
11     }
12 
13     .img-wrap .image {
14         width: 80px;
15         height: 80px;
16         margin: 0 5px 5px 0;
17     }
18 
19     .img-wrap text {
20         position: absolute;
21         right: 10px;
22         top: 0;
23         display: block;
24         height: 25px;
25         width: 16px;
26         border-radius: 0 0 0 5px;
27         background-color: #161417;
28         color: #fff;
29     }
30 
31     .upload-box {
32         background-color: #F7F8FA;
33         width: 80px;
34         height: 80px;
35         line-height: 80px;
36         text-align: center;
37     }