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 :src="src"></image>
				<image
				  class="del-close"
				  src="/static/del-close.png"
					@click="delImg(i)" />
			</view>
		</view>
	</view>
</template>

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

  import { URL } from "../../utils/requestUrl.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(filePathStr)
            // res1.tempFilePaths.map(item => {
            // })
						uni.uploadFile({
              // url: `${URL}/eduscreen/upload/picture`,
              url: `${URL}/imed/pfm/file/uploadImg`,
							fileType: 'image',
							filePath: res1.tempFilePaths[0],
              name: 'file',
              onUploadProgress(progressEvent) {
                var percentCompleted = Math.round(
                  (progressEvent.loaded * 100) / progressEvent.total
                );
                console.log('进度条：', percentCompleted, progressEvent);
              },
							success: res2 => {
								if (res2.statusCode == 200) {
									let data = JSON.parse(res2.data || '{}');
									if (parseInt(data.meta.code, 10) === 200) {
										const { viewUrl, picture } = data.body;
										this.$emit('changeFilePaths', [...this.filePaths, viewUrl], this.pickIndex)
										this.picture = picture;
									} else {
										uni.showToast({
											position: 'top',
											icon: 'none',
											title: '上传图片失败',
											duration: 1000
										});
									}
								}
							},
							error(e) {
								uni.showToast({
									position: 'top',
									icon: 'none',
									title: '上传图片失败',
									duration: 1000
								});
							}
						});
					},
					error: e => {
						console.log('选择图片失败', e);
					}
				});
			},
			// 删除图片
			delImg(i) {
        if(this.disabled) return;
				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-item {
				position: relative;
				margin-right: 25rpx;
				margin-bottom: 25rpx;
				width: 300rpx;
				height: 225rpx;

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

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

</style>