Web_TracerMethodology/components/tm-upload-img/tm-upload-img.vue

<template>
	<view class="tm-upload-img">
		<view class="row" @click="uploadPicture">
			<view class="label-view">
				<text>{{ label }}</text>
			</view>
			<text class="placeholder" v-show="filePaths.length === 0">点击上传图片</text>
			<image class="img-icon" src="/static/img-icon.png"></image>
		</view>
		<!-- 预览图片 -->
		<view class="img-preview">
			<view class="img-item" v-for="(src, i) in filePaths" :key="i">
				<image class="imgItem" :src="src" @click="previewHandle(i)"></image>
				<image class="del-close" src="/static/del-close.png" v-if="!disabled" @click="delImg(i)" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 图片上传(支持单张图片上传 和 多张图片上传)
	 * 芦荟
	 * 2021.2.3
	 * props：属性说明看tm-radio-gruop.vue
	 */

	import uploadImage from "../../utils/uploadImg.js";
	const pictureModule = uni.requireNativePlugin("Wlake-PictureView")
	const modal = uni.requireNativePlugin('modal');
	export default {
		props: {
			// 上传的图片路径列表
			filePaths: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 是否多选	(默认单选)
			isMultiple: {
				type: Boolean,
				default: false
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			label: {
				type: String,
				default: '上传图片'
			},
			// 下标(多个动态的图片上传组件, 遍历的下标)
			pickIndex: {
				type: Number,
				default: 0
			}
		},
		mounted() {

		},
		methods: {
			previewHandle(index) {
				console.log(this.filePaths[0],index);
				const picList = this.filePaths;
				pictureModule.PictureViewerMain({
						'listPic': picList,
						'position':index, // 0 开始算  最大值为   listPic 数组数量 减一 
					},
					(ret) => {
						modal.toast({
							message: ret,
							duration: 1.5
						});
					});
			},
			// 上传图片
			uploadPicture() {
				if (this.disabled) return;
				uni.chooseImage({
					count: this.isMultiple ? 9 : 1, // 是否多选
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['camera'], //从相册选择,默认时可以选择从相机和相册中选取
					success: res1 => {
						uploadImage(res1).then(fileList => {
							if (this.isMultiple) {
								this.$emit('changeFilePaths', {
									files: [...this.filePaths, ...fileList],
									index: this.pickIndex
								});
							} else {
								this.$emit('changeFilePaths', {
									files: fileList,
									index: this.pickIndex
								});
							}
						})
					},
					error: e => {
						console.log('选择图片失败', e);
					}
				});
			},
			// 删除图片
			delImg(i) {
				const currentIndex = this.pickIndex;
				this.$emit('changeFilePaths', {
					files: this.filePaths.filter((item, index) => index != i),
					index: currentIndex
				});
			}
		}
	}
</script>

<style lang="less">
	.tm-upload-img {
		background-color: #fff;
		padding-left: 25rpx;

		.row {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// flex: 1;
			padding-right: 25rpx;
            margin-bottom: 30rpx;
			.label-view {
				width: 175rpx;
				line-height: 22.5rpx;
				padding: 31.25rpx 0;

				text {
					font-size: 22.5rpx;
					color: #666F80;
				}
			}

			.placeholder {
				position: absolute;
				top: 31.25rpx;
				left: 175rpx;
				font-size: 22.5rpx;
				color: #B8BECC;
			}

			.img-icon {
				width: 30rpx;
				height: 25rpx;
			}
		}

		.img-preview {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: flex-start;

			img {
				opacity: 1 !important;
			}

			.img-item {
				position: relative;
				margin-bottom: 25rpx;
				width: 150rpx;
				height: 150rpx;
				margin-right:35rpx;

				>image {
					width:100%;
					height:100%;
					opacity: 1;
				}

				.imgItem>img {
					opacity: 1;
				}

				.del-close {
					position: absolute;
					top: -12.5rpx;
					right: -12.5rpx;
					width: 37.5rpx;
					height: 37.5rpx;
				}

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
</style>