clsd/app/components/images/images.vue

<template>
	<view class="imgs">
		<view class="photo" v-for="(item, index) in list" :key="index" @click="preview(item)">
			<image :src="ip + item" mode="aspectFill"></image>
			<text class="del" @click.stop="del(item)" v-if="!read">删除</text>
		</view>
		<view class="uploads" v-if="list.length < 3 && !read" @click="chooseImage()">
			<view class="bw">
				<view class="icon">&#xe65c;</view>
				<view class="text" style="color: rgb(145 154 179)">选择图片</view>
			</view>
		</view>
		<view class="clear"></view>
	</view>
</template>

<script>
export default {
	name: 'images',
	props: {
		value: {
			type: Array
		},
		read: {
			type: Boolean,
			default: false
		},
		limit: {
			type: Number,
			default: 3
		}
	},
	data() {
		return {
			ip: this.http.ip,
			list: []
		};
	},
	watch: {
		value: {
			handler(newValue, oldValue) {
				this.list = newValue;
			},
			immediate: true
		}
	},
	methods: {
		chooseImage() {
			if (this.list.length < this.limit) {
				//照片选择
				uni.chooseImage({
					count: this.limit, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						res.tempFilePaths.forEach((path) => {
							uni.showLoading({ title: '正在上传图片', mask: true });
							uni.uploadFile({
								url: this.ip + '/app/common/upload',
								filePath: path,
								name: 'file',
								header: { Authorization: this.getUser().token },
								success: (res) => {
									let data = JSON.parse(res.data);
									if (data.code == 200) {
										this.list.push(data.fileName);
										this.$emit('input', this.list);
									}
									uni.hideLoading();
								},
								fail: (res) => {
									uni.hideLoading();
									uni.showModal({ content: '图片上传失败', showCancel: false });
								}
							});
						});
					}
				});
			} else {
				uni.showModal({ content: '只能上传' + this.limit + '张图片', showCancel: false });
			}
		},
		preview(item) {
			let urls = [];
			this.value.forEach((item) => {
				urls.push(this.ip + item);
			});
			// 预览图片
			uni.previewImage({
				urls: urls,
				current: this.ip + item,
				success: (res) => {}
			});
		},
		del(item) {
			this.value.splice(this.value.indexOf(item), 1);
			this.$emit('input', this.value);
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.imgs {
	margin-top: 10px;
	overflow: hidden;
	.uploads {
		float: left;
		width: 75px;
		height: 75px;
		text-align: center;
		border-radius: 5px;
		margin: 5px 5px 0px 0px;
		overflow: hidden;
		background-color: white;
		border: 1px solid #e2e2e2;
		.bw {
			padding-top: 10px;
			.icon {
				font-size: 30px;
				display: block;
				float: none;
			}
			.text {
				font-size: 14px;
				color: #6c6c6c;
			}
		}
	}
	.photo {
		float: left;
		margin: 5px 10px 0px 0px;
		position: relative;
		overflow: hidden;
		border-radius: 5px;
		width: 75px;
		height: 75px;

		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		image {
			width: 75px;
			height: 75px;
			border-radius: 5px;
		}
		.del {
			position: absolute;
			top: 0px;
			right: 0px;
			background-color: #f44336;
			color: white;
			padding: 2px 6px;
			font-size: 12px;
		}
	}
}
</style>