zx_flk_app/component/uploaders/uploaders.vue

<template>
	<view >
		<view class="list-group">
			<view class="list-item" @longpress="bindDelImage" :data-idx="index"
				v-for="(item, index) in imgList" :key="item.unique">
				<!-- <image  class="img-item-demo" :src="item.url"></image> -->
				<image  class="img-item" :src="item.url" mode="aspectFill"></image>
				<!-- <view class="img_text">{{ item.title? item.title : '车辆照片'}}</view> -->
			</view>
			<view v-if="imgList.length < max" class="list-item" @tap="bindUpImg">
				<!-- <view class="img_text">车辆照片</view> -->
				<view class="empity-item">＋</view>
			</view>
		</view>
	</view>
</template>

<script>
import upload from './upload.js';
	export default {
		props: {
			car_info: {
				type: Array,
				required: true //必填项
			},
			max:{
				type: Number,
				default:1
			}
		},
		data() {
			return {
				imgList:[]
			}
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		mounted() {
			this.imgList = this.car_info
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			// 上传
			async bindUpImg(e) {
				let res = await uni.chooseImage({
					count: this.max - this.imgList.length,
				})
				if(res[1]){
					const imgList = res[1].tempFilePaths
					let data = await upload.uploadFile(imgList)
					this.imgList = this.imgList.concat(data)
					this.updateImages(this.imgList)
				}
			},	
			
            // 删除图片
			async bindDelImage(e) {
				const index = e.currentTarget.dataset.idx
				// 样例图不删除
				if (this.imgList[index].url == '') return false
				let res = await uni.showModal({
					title: '提示',
					content: '你确定要删除吗？',
					showCancel: true,
				})
				if (res[1].confirm) {
					this.imgList.splice(index,1)
					this.updateImages(this.imgList);
				}
			},
			updateImages(imgList) {
				this.$emit('update-car-images', imgList);
			}

		}
	};
</script>

<style>
	@import '../uploader/uploader.css';
</style>