From cc58e4420e6d2c604b3d0ce32824fc0c3a68f665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Tue, 9 Sep 2025 16:06:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0SimpleFileUpload=E7=BB=84=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=E5=88=B0=E8=81=8A=E5=A4=A9=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建新的SimpleFileUpload组件实现文件上传功能
- 在聊天窗口替换原有上传按钮为新的组件
- 为上传API添加调试日志
- 移除聊天窗口重复的音频图标导入
---
 Cunkebao/src/api/common.ts                    | 16 +--
 .../Upload/SimpleFileUpload/index.tsx         | 97 +++++++++++++++++++
 .../components/MessageEnter/index.tsx         | 26 ++---
 3 files changed, 120 insertions(+), 19 deletions(-)
 create mode 100644 Cunkebao/src/components/Upload/SimpleFileUpload/index.tsx

diff --git a/Cunkebao/src/api/common.ts b/Cunkebao/src/api/common.ts
index 77a0e7de..351e3c90 100644
--- a/Cunkebao/src/api/common.ts
+++ b/Cunkebao/src/api/common.ts
@@ -10,18 +10,22 @@ export async function uploadFile(
   uploadUrl: string = "/v1/attachment/upload",
 ): Promise<string> {
   try {
+    console.log("uploadFile 接收到的文件:", file);
+    console.log("上传URL:", uploadUrl);
+
     // 创建 FormData 对象用于文件上传
     const formData = new FormData();
     formData.append("file", file);
 
-    // 使用 request 方法上传文件，设置正确的 Content-Type
-    const res = await request(uploadUrl, formData, "POST", {
-      headers: {
-        "Content-Type": "multipart/form-data",
-      },
-    });
+    console.log("FormData 创建完成");
+    console.log("FormData 内容:", formData.get("file"));
+
+    // 使用 request 方法上传文件，让浏览器自动设置 Content-Type
+    const res = await request(uploadUrl, formData, "POST");
+    console.log("上传响应:", res);
     return res.url;
   } catch (e: any) {
+    console.error("uploadFile 错误:", e);
     throw new Error(e?.message || "文件上传失败");
   }
 }
diff --git a/Cunkebao/src/components/Upload/SimpleFileUpload/index.tsx b/Cunkebao/src/components/Upload/SimpleFileUpload/index.tsx
new file mode 100644
index 00000000..0556ce44
--- /dev/null
+++ b/Cunkebao/src/components/Upload/SimpleFileUpload/index.tsx
@@ -0,0 +1,97 @@
+import React, { useRef, useState } from "react";
+import { Button, message } from "antd";
+import { FolderOutlined, LoadingOutlined } from "@ant-design/icons";
+import { uploadFile } from "@/api/common";
+
+interface SimpleFileUploadProps {
+  onFileUploaded?: (filePath: string) => void;
+  disabled?: boolean;
+  className?: string;
+  maxSize?: number; // 最大文件大小(MB)
+  accept?: string; // 接受的文件类型
+}
+
+const SimpleFileUpload: React.FC<SimpleFileUploadProps> = ({
+  onFileUploaded,
+  disabled = false,
+  className,
+  maxSize = 50,
+  accept = "*/*",
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  // 验证文件
+  const validateFile = (file: File): boolean => {
+    if (file.size > maxSize * 1024 * 1024) {
+      message.error(`文件大小不能超过 ${maxSize}MB`);
+      return false;
+    }
+    return true;
+  };
+
+  // 处理文件选择
+  const handleFileSelect = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    console.log("选择的文件:", file);
+    console.log("文件名:", file.name);
+    console.log("文件大小:", file.size);
+    console.log("文件类型:", file.type);
+
+    if (!validateFile(file)) {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      return;
+    }
+
+    setUploading(true);
+
+    try {
+      console.log("开始上传文件...");
+      const fileUrl = await uploadFile(file);
+      console.log("上传成功，文件URL:", fileUrl);
+      onFileUploaded?.(fileUrl);
+      message.success("文件上传成功");
+    } catch (error: any) {
+      console.error("文件上传失败:", error);
+      message.error(error.message || "文件上传失败");
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const handleClick = () => {
+    if (disabled || uploading) return;
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        onChange={handleFileSelect}
+        style={{ display: "none" }}
+      />
+      <Button
+        type="text"
+        icon={uploading ? <LoadingOutlined /> : <FolderOutlined />}
+        onClick={handleClick}
+        disabled={disabled || uploading}
+        className={className}
+      />
+    </>
+  );
+};
+
+export default SimpleFileUpload;
diff --git a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
index 606d6b07..35cb2678 100644
--- a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
@@ -3,10 +3,7 @@ import { Layout, Input, Button, Dropdown, Menu, Tooltip, Modal } from "antd";
 import {
   ShareAltOutlined,
   SendOutlined,
-  SmileOutlined,
-  FolderOutlined,
   AudioOutlined,
-  AudioOutlined as AudioHoldOutlined,
   CodeSandboxOutlined,
   MessageOutlined,
   EnvironmentOutlined,
@@ -16,6 +13,7 @@ import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
 import { EmojiPicker } from "@/components/EmojiSeclection";
 import { EmojiInfo } from "@/components/EmojiSeclection/wechatEmoji";
+import SimpleFileUpload from "@/components/Upload/SimpleFileUpload";
 import styles from "./MessageEnter.module.scss";
 
 const { Footer } = Layout;
@@ -96,11 +94,14 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
 
   // 处理表情选择
   const handleEmojiSelect = (emoji: EmojiInfo) => {
-    console.log("选择表情:", emoji.name);
-    // 将表情插入到输入框文字的最后
     setInputValue(prevValue => prevValue + `[${emoji.name}]`);
   };
 
+  const handleFileUploaded = (filePath: string) => {
+    console.log("文件上传成功，路径:", filePath);
+    // 这里可以根据需要处理文件路径，比如发送文件消息
+  };
+
   return (
     <>
       {/* 聊天输入 */}
@@ -109,13 +110,12 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
           <div className={styles.inputToolbar}>
             <div className={styles.leftTool}>
               <EmojiPicker onEmojiSelect={handleEmojiSelect} />
-              <Tooltip title="上传附件">
-                <Button
-                  type="text"
-                  icon={<FolderOutlined />}
-                  className={styles.toolbarButton}
-                />
-              </Tooltip>
+              <SimpleFileUpload
+                onFileUploaded={handleFileUploaded}
+                className={styles.toolbarButton}
+                maxSize={50}
+                accept="*/*"
+              />
               <Tooltip title="收藏">
                 <Button
                   type="text"
@@ -140,7 +140,7 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
               <Tooltip title="按住说话">
                 <Button
                   type="text"
-                  icon={<AudioHoldOutlined />}
+                  icon={<AudioOutlined />}
                   className={styles.toolbarButton}
                   style={{ position: "relative" }}
                 >