iot-test-app/pages/upload-face/upload-face.vue

<template>
	<view class="">

		<view class="pic" @click="takePhoto">
			<u-icon v-if="!pic" class="icon" name="plus" color="#2979ff" size="50"></u-icon>
			<img v-else :src="pic" alt="">
		</view>
		<view class="upload" style="width: 100%;">
			<u-button color="red" @click="deleteFace" type="primary" size="large" text="删除人脸"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				bgColor: '#3c9cff',
				pic: '',
				msg: {
					userId: uni.getStorageSync('userId'),
					facePic: ""
				},
			}
		},
		methods: {

			takePhoto() {
				uni.chooseImage({
					count: 1, //选择图片的数量，默认9
					sizeType: ['compressed'], //原图、压缩图或者两者都有，可以指定原图或压缩图，默认两者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表
						console.log(tempFilePaths[0]);
						this.urlTobase64(tempFilePaths[0])

					}
				})
			},
			urlTobase64(url) {
				console.log('url', url);
				let that = this
				uni.getFileSystemManager().readFile({
					filePath: url, //照片的临时地址
					encoding: "base64", //编码格式
					success: async (res) => {
						let url = "data:image/jpg" + ";base64," + res.data //base64地址
						url = url.split(',')[1]
						that.msg.facePic = url
						uni.showLoading({
							mask: true,
							title: '图片上传中'
						})
						const {
							data: result
						} = await uni.$http.post('/api/v1/test/user/face', that.msg)
						uni.hideLoading()
						console.log(11, result);
						if (result.code == 200) {
							this.$u.toast(`人脸上传成功`)
							that.pic = 'data:image/jpeg;base64,' + url

						} else {
							// this.$u.toast(result.msg)
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								title: '失败主题',
								message: result.msg
							})
							// uni.showToast({
							// 	duration: 2000,
							// 	title: result.msg,
							// 	icon: 'error'

							// })
						}


					},
					fail: (res) => reject(res.errMsg),
				})

			},
			async getFacePic() {
				uni.showLoading({
					mask: true,
					title: '正在加载',
					icon: "none"
				})
				let {
					data: res
				} = await uni.$http.get(`/api/v1/test/user/facePic/${this.msg.userId}`)
				console.log(res);
				uni.hideLoading()
				if (res.code == 200) {
					this.pic = 'data:image/jpg;base64,' + res.data
					console.log(this.pic);
				} else {
					this.$u.toast(`人脸未上传，请上传照片`)
				}

			},

			async deleteFace() {
				const {
					data: result
				} = await uni.$http.delete(`/api/v1/test/user/face/${this.msg.userId}`)
				console.log(this.msg.userId);
				if (result.code === 200) {
					uni.showToast({
						duration: 1500,
						title: result.data,
						icon: 'none'
					})
					this.pic = ''
				} else {
					uni.$showMsg('删除失败')
				}


			}
		},
		onLoad() {
			this.getFacePic()
		}
	}
</script>
<style lang="scss">
	.camera {

		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.pic {
		margin: 100px auto;
		border: 1px solid #3c9cff;
		width: 500rpx;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {}

		img {
			width: 100%;
			height: 100%;
		}
	}

	.upload {
		display: inline-block;
		position: fixed;
		bottom: 0;
	}
</style>