2. Vue------ 图片的上传，camera拍照上传

1. 老规矩上大图： 图1.png

2. 话不多说，上代码，先主要看逻辑哈

    <!-- 上传照片 -->
                <view class="grid col-2 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                        <image :src="imgList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="bg-img2" @tap="ChooseImage" v-if="imgList.length<1">

                    </view>
                </view>
                <view class="grid col-2 grid-square flex-sub ">
                    <view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2" :data-url="imgList2[index]">
                        <image :src="imgList2[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="bg-img3" @tap="ChooseImage2" v-if="imgList2.length<1">

                    </view>
                </view>

js 定义一个集合存放 上传的图片，以及上传方法，删除方法

<script>
    export default {
        data() {
            return {
                              imgList: []
                                 }
             }，
           method:{
                  ChooseImage() {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera'], //拍照选择
                    success: (res) => {

                        if (this.imgList.length != 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
                        } else {
                            this.imgList = res.tempFilePaths
                        }
                    }
                });
            },

            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg(e) {
                uni.showModal({
                    title: '删除',
                    content: '确定要删除此照片么吗？',
                    cancelText: '取消',
                    confirmText: '确认',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            }
      }
}
</script>

部分样式

.bg-img2 {
        background-image: url(../../static/img/ic_card_font.png);
        display: flex;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .bg-img3 {
        background-image: url(../../static/img/ic_card_reverse.png);
        display: flex;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

所有样式链接