feat: 文件长传

src/api/upload.ts

@@ -1,2 +1,9 @@
 import request from '@/utils/request'
 
+export const uploadImage = (data: FormData) => {
+	return request({
+		url: '/api/file/upload',
+		method: 'POST',
+		data
+	})
+}

src/views/home/components/Input.vue

@@ -188,6 +188,7 @@
 	import restoreCloseIcon from '@/assets/images/tag-close.png'
 	import { createProject } from '@/api/agent'
 	import { getStyleImage } from './style'
+	import { uploadImage } from '@/api/upload'
 	// import Tag from './Tag.vue'
 
 	const router = useRouter()
@@ -221,18 +222,26 @@
 	// 处理文件选择
 	const handleFileChange = (event: Event) => {
 		const input = event.target as HTMLInputElement
+
 		if (input.files) {
 			Array.from(input.files).forEach((file) => {
 				// 只处理图片文件
 				if (file.type.startsWith('image/')) {
-					const reader = new FileReader()
-					reader.onload = (e) => {
-						uploadedImages.value.push({
-							url: e.target?.result as string,
-							name: file.name
-						})
-					}
-					reader.readAsDataURL(file)
+					const formData = new FormData()
+					formData.append('file', file)
+					uploadImage(formData).then((res) => {
+						console.log(res)
+
+						const reader = new FileReader()
+						reader.onload = (e) => {
+							uploadedImages.value.push({
+								url: e.target?.result as string,
+								name: file.name,
+								path: res
+							})
+						}
+						reader.readAsDataURL(file)
+					})
 				}
 			})
 		}
@@ -293,7 +302,6 @@
 			imgClose.src = closeIcon as unknown as string
 		}
 
-		
 		textSpan.innerText = tagText
 
 		imgClose.addEventListener('click', (ev) => {
@@ -467,19 +475,15 @@
 	}
 
 	const handleSendAgent = async () => {
-		console.log('发送信息--------')
-
 		if (props.generating) {
 			emits('pause')
 			return
 		}
 		if (!inputValue.value.trim()) return
-		console.log('222222')
+		const imageUrlList = uploadedImages.value.map((item) => item.path)
 
-		const payload = { text: inputValue.value.trim(), images: uploadedImages.value }
-		console.log('准备发送 send 事件', payload)
+		const payload = { text: inputValue.value.trim(), images: imageUrlList }
 		emits('send', payload)
-		console.log('send 事件已发送')
 
 		// 发送后清空输入框
 		if (editorRef.value) {
@@ -1056,15 +1060,14 @@
 			height: 1rem;
 			cursor: pointer;
 			flex-shrink: 0;
-			&.restore{
+			&.restore {
 				width: 0.5rem;
 				height: 0.5rem;
 			}
 		}
-		.restore-icon{
+		.restore-icon {
 			width: 1.2rem;
 			height: 1.2rem;
 		}
-		
 	}
 </style>