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
		}
	},
	data() {
		return {
			ip: this.http.ip,
			list: []
		};
	},
	watch: {
		value: {
			handler(newValue, oldValue) {
				this.list = newValue;
			},
			immediate: true
		}
	},
	methods: {
		chooseImage() {
			//照片选择
			uni.chooseImage({
				count: 3, //默认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) {
									console.log('asd:' + data.fileName);
									if (this.list.length < 3) {
										this.list.push(data.fileName);
									}
									this.$emit('input', this.list);
								}
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showModal({ content: '图片上传失败', 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>