老规矩先上图:
图一:
图二:
图二是图一点击方法的效果
后台返回的数据格式:
[{
"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
})
},
}
}