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"></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";
	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
      }
		},
		methods: {
			// 上传图片
			uploadPicture() {
        if(this.disabled) return;
				uni.chooseImage({
					count: this.isMultiple ? 9 : 1, // 是否多选
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res1 => {
					console.log({res1});
            uploadImage(res1).then(fileList => {
              if(this.isMultiple){
                this.$emit('changeFilePaths', [...this.filePaths, ...fileList], this.pickIndex);
              }else {
                this.$emit('changeFilePaths', fileList, this.pickIndex);
              }
				  	})
					},
					error: e => {
						console.log('选择图片失败', e);
					}
				});
			},
			// 删除图片
			delImg(i) {
				this.$emit('changeFilePaths', this.filePaths.filter((item, index) => index != i), this.pickIndex);
			}
		}
	}
</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;

			.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;
            img {
				opacity: 1 !important;
			}
			.img-item {
				position: relative;
				margin-right: 25rpx;
				margin-bottom: 25rpx;
				width: 300rpx;
        height: 225rpx;

				>image {
					width: 300rpx;
					height: 225rpx;
					opacity: 1;
				}

                .imgItem>img {
					opacity: 1;
				}
				.del-close {
					position: absolute;
					top: -12.5rpx;
					right: -12.5rpx;
					width: 37.5rpx;
					height: 37.5rpx;
				}
			}
		}
	}

</style>