clsd/app/components/card/card.vue

<!--证件照片上传（单张）-->
<template>
	<view class="sfz" @click="chooseImage()" :style="{ border: fileName ? '' : '1px solid #eeeeee' }">
		<image :src="ip + fileName" mode="widthFix" v-if="fileName"></image>
		<view class="uploads" v-else>
			<view class="bw">
				<text class="icon">&#xe624;</text>
				<view class="text">选择图片</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'card',
	props: {
		value: {
			type: String
		},
		read: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			fileName: this.value,
			ip: this.http.ip
		};
	},
	watch: {
		value(newValue) {
			this.fileName = newValue;
		}
	},
	methods: {
		chooseImage() {
			if (this.read) {
				return;
			}
			//照片选择
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (res) => {
					res.tempFilePaths.forEach((path) => {
						uni.showLoading({ title: '正在上传图片', mask: true });
						uni.uploadFile({
							url: this.http.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.fileName = data.fileName;
									this.$emit('input', data.fileName);
								} else {
									uni.showModal({ content: data.msg, showCancel: false });
								}
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showModal({ content: '图片上传失败', showCancel: false });
							}
						});
					});
				}
			});
		},
		// 预览图片
		preview(item) {
			uni.previewImage({
				urls: [this.ip + item],
				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>
.sfz {
	text-align: center;
	border-radius: 5px;
	margin-top: 10px;
	color: $font-c;
	overflow: hidden;
	background-color: white;
	image {
		width: 100%;
		margin: 0 auto;
		border-radius: 5px;
	}
	.uploads {
		width: 100%;
		text-align: center;
		.bw {
			padding: 20px;
			.icon {
				font-size: 50px;
			}
			.text {
				color: $font-c;
			}
		}
	}
}
</style>