blindDate/components/lf-uploadImage/lf-uploadImage.vue

<template>
	<view class="upload-images">
		<view class="upload-image-item" 
			:style="{order: uploadButton == 'front' ? '1' : '2'}" 
			@click="uploadImage" 
			v-if="(count == -1) || (image_list.length < count)">
			<text class="lf-iconfont lf-icon-jia upload-image-item-after"></text>
		</view>
		<view class="upload-image-item" 
			:style="{order: uploadButton == 'front' ? '2' : '1'}" 
			v-for="(item, index) in image_list" :key="index" 
			@click="lookImage(index)">
			<image :src="item" mode="aspectFill"></image>
			<view class="remove-image" @click.stop="removeInage(index)" v-if="showDelete">
				<text class="lf-iconfont lf-icon-shanchu"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			uploadButton: {
				type: String, // 上传按钮显示在哪里，front图片前面，behind图片后面
				default: 'front'
			},
			showDelete: {
				type: Boolean, // 是否可删除图片
				default: true
			},
			count: {
				type: Number, // 可上传多少张图, 默认6张
				default: 6
			},
			size: {
				type: Number, // 限制单张图上传大小，单位M
				default: 10
			},
			drag: {
				type: Boolean, // TODO 是否可拖拽排序图片
				default: false
			}
		},
		data(){
			return {
				image_list: []
			}
		},
		onLoad(){
			
		},
		methods: {
			// 上传凭证图片
			uploadImage(){
				let current_count = this.$props.count - this.image_list.length;
				if(this.$props.count == -1){
					current_count = 9;
				}
				if(current_count == 0) return;
				uni.chooseImage({
					count: current_count,
					complete: result => {
						if(result.errMsg == "chooseImage:fail cancel"){
							return; // 取消选择图片
						}
						let tempFiles = result.tempFiles;
						let image_list = [];
						let overstep = false;
						tempFiles.map(item => {
							// 上传的图片大小
							let size = Math.floor((Number(this.$props.size) || 1) * 1024 * 1024);
							if(item.size < size){
								image_list.push(item.path);
							}else{
								overstep = true;
							}
						})
						if(overstep){
							uni.showModal({
								title: '温馨提示',
								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
								showCancel: false
							})
						}
						this.image_list.push(...image_list);
					}
				})
			},
			// 预览图片
			lookImage(current){
				if(this.image_list.length <= 0) return;
				this.$u.throttle(() => {
					uni.previewImage({
						urls: this.image_list,
						current: current
					});
				}, 500);
			},
			// 移除图片
			removeInage(current){
				this.image_list.splice(current, 1);
			},
			// 返回已上传的图片列表
			getUploadImage(){
				return this.image_list;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.upload-images{
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		margin-bottom: 18rpx;
		.upload-image-item{
			width: 220rpx;
			height: 220rpx;
			background: #DDDDDD;
			position: relative;
			margin-right: 12rpx;
			&:nth-child(3n){
				margin-right: 0rpx;
			}
			&:nth-child(n+4){
				margin-top: 12rpx;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.remove-image{
				position: absolute;
				right: -4rpx;
				top: -18rpx;
				color: #e74c3c;
				font-size: 40rpx;
				padding: 8rpx;
			}
		}
		.upload-image-item-after{
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60rpx;
			color: #999999;
		}
	}
</style>