uni-app 获取数据动态预览

老规矩先上图：

图一：

图二：

图二是图一点击方法的效果

后台返回的数据格式：

[{
    "e_id": 27,
    "e_time": "2020-07-07 15:51:08",
    "e_statu": 1,
    "e_remark": "通过",
    "c_ids": 97,
    "u_id": 4,
    "c_id": 97,
    "c_companyName": "济南xxx科技有限公司",
    "c_legalPerson": "as",
    "c_legalPhone": "15155555555",
    "c_name": "fdsf",
    "c_companyRemark": "fasf",
    "c_successTime": null,
    "c_perisonNumber": 0,
    "c_companyAddress": null,
    "c_companyLogo": null,
    "c_time": "2020-07-07 15:50:18",
    "imgArray1": null,
    "imgArray2": null,
    "imgArray3": null,
    "totalNum": 0,
    "type": 0,
    "c_companyType": 1,
    "c_statu": 1,
    "token": null,
    "name": "AC2",
    "c_disable": 1,
    "startTime": null,
    "endTime": null,
    "persionImagelist": [{
        "image_id": 150,
        "image_src": "http://192.168.0.101:8082/upload/15941082193121594108190091.jpg",
        "image_type": 2,
        "image_time": 1594108219000,
        "c_id": 97
    }, {
        "image_id": 151,
        "image_src": "http://192.0.0.1:8082/upload/15941082193241594108193522.jpg",
        "image_type": 2,
        "image_time": 1594108219000,
        "c_id": 97
    }],
    "lincesImageList": [{
        "image_id": 152,
        "image_src": "http://192.0.0.1:8082/upload/15941082195531594108197161.jpg",
        "image_type": 1,
        "image_time": 1594108219000,
        "c_id": 97
    }],
    "companyImageList": [{
        "image_id": 153,
        "image_src": "http://192.0.0.1:8082/upload/15941082198101594108202488.jpg",
        "image_type": 3,
        "image_time": 1594108219000,
        "c_id": 97
    }, {
        "image_id": 154,
        "image_src": "http://192.0.0.1:8082/upload/15941082198221594108202891.jpg",
        "image_type": 3,
        "image_time": 1594108219000,
        "c_id": 97
    }, {
        "image_id": 155,
        "image_src": "http://192.0.0.1/upload/15941082198451594108203346.jpg",
        "image_type": 3,
        "image_time": 1594108219000,
        "c_id": 97
    }],
    "c_type": 2
}]

其中：companyImageList，lincesImageList，persionImagelist 是图片集合

前端代码拿其中一个 companyImageList 举例：

            <view class="form_l">上传公司照片：{{company.companyImageList.length}}/3</view>
                <view class="uni-list list-pd">
                    <view class="uni-list-cell cell-pd">
                        <view class="uni-uploader">
                            <view class="uni-uploader-body">
                                <view class="uni-uploader__files">
                                    <block v-for="(image,index) in company.companyImageList" :key="index">
                                        <view class="uni-uploader__file">
                                            <image class="uni-uploader__img" :src="image.image_src" :data-src="image.image_src" @tap="previewImage(index,image.image_src)"></image>//重点一点别忘记 这里传了一个下标跟一个图片的地址
                                        </view>
                                    </block>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

js:

    export default {
        data() {
            return {
                company:{
                    lincesImageList: [],
                    persionImagelist: [],
                    companyImageList: [],
                },

            }
        },
        onLoad(){
       
        },
        methods: {
     
            previewImage: function(index,image) {
                        var arr=[];
                        arr.push(image)
                        uni.previewImage({
                            current:index, //预览图片的下标
                            urls:arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以，不能加key
                        })
            },
        }
    }