zhxg_xsbdV1.0/pages/Photo/Photo.vue

<!-- 照片采集 -->
<template>
	<view class="Photo">

		<view class="Picture_box" @tap="choosePic">
			<text v-if="!photo" class="Picture_text">图片上传</text>
			<image v-if="photo" :src="photo" mode=""></image>
		</view>

		<button class="Picture_button" @tap="submitOwnPhoto">上传图片</button>
		
		<!-- 报错显示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 上传后加一段动画 -->
		<zero-loading v-if="loading"></zero-loading>
		<FloatBall />
	</view>
</template>

<script>
	//接口：
	//本地存储接口
	//获取个人信息接口

	//图片上传接口
	import {
		getOwnPhoto, //获取新生照片
		submitOwnPhoto //上传新生照片
	} from "@/api/photo.js";

	import {
		isEmpty
	} from '../../api/helpFunc';
	//自定义组件
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	//
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				photo: null, //图片文件(base64编码)
				loading: false //上传动画
			}
		},
		async onLoad() {
			this.loading = true
			await this.getOwnPhoto();
			this.loading = false
		},
		methods: {
			//用户选择图片
			choosePic: async function() {
				//获取本地图片并且展示
				let that = this;
				uni.chooseImage({
					count: 1, //图片选择一张
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 保存图片路径
						//this.photo=res.tempFilePaths[0];
						
						let tempImgPath = res.tempFilePaths[0];
						
						//修改图片编码
						//将图片路径转换为 Blob 对象
						fetch(tempImgPath)
							.then(response => response.blob())
							.then(blob => {
								// 修改图片编码
								let reader = new FileReader();
								reader.onload = function(event) {
									that.photo = event.target.result;
									//console.log(that.photo);
								};
								// 读取文件并将其转换为 Base64 编码
								reader.readAsDataURL(blob);
								// 读取文件并将其转换为 UTF-8 编码的文本格式
								//reader.readAsText(blob, 'UTF-8');
							})
							.catch(err => {
								this.$refs.uToast.show({
									type: 'error',
									message: '获取文件失败:' + err.message,
									duration: 1500
								});
							});
					},
					fail: (err) => {
						this.$refs.uToast.show({
							type: 'error',
							message: '选择图片失败:' + err.message,
							duration: 1500
						});
					}
				});
			},
			//新增图片到服务器
			async submitOwnPhoto() {
				let sdata = {
					//表单数据
					// 照片(base64编码)：photo
					photo: this.photo,
				}
				//表单数据判定
				if (isEmpty(sdata.photo)) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请选择图片',
						duration: 1500
					});
					return;
				}
				//动画显示
				this.loading = true;
				let res = await submitOwnPhoto(sdata);
				this.loading = false;
				if (res.code == 200) {
					this.$refs.uToast.show({
						type: "success",
						message: res.msg,
						duration: 1500,
					});
				} else {
					console.log(res.msg);
					this.$refs.uToast.show({
						type: "error",
						message: res.msg,
						duration: 1500,
					});
				}
			},
			//从服务器获得新生照片照片
			async getOwnPhoto() {
				let that = this;
				let res = await getOwnPhoto(); //连接服务器传入照片id
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						let data = {
							...res.data
						};
						that.photo = data.photo;
					}
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.Photo {
		flex: 1;

		.Picture_box {
			height: 60vh;
			margin: 10%;
			border: 2px dashed gray;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			.Picture_text {
				font-size: 45rpx;
				writing-mode: vertical-rl;
				text-orientation: upright;
				color: #c5c5c5;
			}

			image {
				height: 100%;
			}
		}

		.Picture_button {
			margin: 10%;
		}
	}
</style>