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 { 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 = ({ + onFileUploaded, + disabled = false, + className, + maxSize = 50, + accept = "*/*", +}) => { + const fileInputRef = useRef(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, + ) => { + 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 ( + <> + +