上传多张图片的布局 flex布局 uniapp 我称它为九宫格

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

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

                </view>
            </view>

 

export default {
        data() {
            return {
                uploadDatas: [],
                   }
        }
        methods:{
             previewUpload(e) {
             　　console.log('预览', e);
             　　uni.previewImage({
               　　  current: e.currentTarget.dataset.url, // 当前显示图片的http链接
               　　  urls: [e.currentTarget.dataset.url] // 需要预览的图片http链接列表
             　　});
            },
                        //上传
            uploadUpload(e) {
                this.uploadImage(this, 'upload');
            }, 
              
}
}                

 

 

 

.wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .img-wrap {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .img-wrap .image {
        width: 80px;
        height: 80px;
        margin: 0 5px 5px 0;
    }

    .img-wrap text {
        position: absolute;
        right: 10px;
        top: 0;
        display: block;
        height: 25px;
        width: 16px;
        border-radius: 0 0 0 5px;
        background-color: #161417;
        color: #fff;
    }

    .upload-box {
        background-color: #F7F8FA;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }