添加接口

src/views/Workshop/uploadFace2.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
-	import { ref, onMounted } from 'vue'
+	import { ref, reactive, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { uploadCustomerPhoto } from '@/api/workshop'
 	const emit = defineEmits(['view-type'])
 	onMounted(() => {
 		emit('view-type', 1)
 	})
 	const router = useRouter()
-	const faceUrl = ref('')
+	const fileData = reactive({
+		url:"",
+		file: null,
+	});
+	console.log(fileData)
 	// 上传照片
 	const handleUploadFace = () => {
 		const input = document.createElement('input')
@@ -19,17 +24,28 @@
 		input.onchange = (e: any) => {
 			const file = e.target.files[0]
 			if (!file) return
-			const reader = new FileReader()
-			reader.readAsDataURL(file)
-			reader.onload = () => {
-				faceUrl.value = reader.result as string
-			}
+			const url = URL.createObjectURL(file)
+			fileData.url = url
+			fileData.file = file
+			// const reader = new FileReader()
+			// reader.readAsDataURL(file)
+			// reader.onload = () => {
+			// 	faceUrl.value = reader.result as string
+			// }
 		}
 	}
 	// 生成照片
 	const handleGenerate = () => {
 		console.log('生成照片')
-		router.push({ name: 'customize' })
+		if (!fileData.file) return
+		const formData = new FormData()
+		formData.append('customerId', "1")
+		formData.append('visitRecordId', "1")
+		formData.append('file', fileData.file)
+		uploadCustomerPhoto(formData).then(res => {
+			console.log(res)
+			// router.push({ name: 'customize' })
+		})
 	}
 </script>
 
@@ -44,11 +60,11 @@
 				to Try-on
 			</div>
 			<!-- 照片 -->
-			<div class="picture" v-if="faceUrl">
-				<img :src="faceUrl" />
+			<div class="picture" v-if="fileData.url">
+				<img :src="fileData.url" />
 			</div>
 			<div class="btns">
-				<template v-if="faceUrl">
+				<template v-if="fileData.url">
 					<button class="sandblasted-blurred" @click="handleUploadFace"><span>Re-try</span></button>
 					<button class="sandblasted-blurred" @click="handleGenerate"><span>Generate</span></button>
 				</template>
@@ -108,7 +124,7 @@
 					height: 79.2rem;
 					border-radius: 1rem;
 					border: 0.2rem solid #d9d9d9;
-					object-fit: contain;
+					object-fit: cover;
 				}
 			}
 			> .btns {