From 5e4cdbedbfc60c308804eb69821cabdad962e26c Mon Sep 17 00:00:00 2001 From: wong <106998207@qq.com> Date: Thu, 3 Jul 2025 16:12:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E5=8F=AA=E8=83=BD=E4=B8=8A=E4=BC=A09=E5=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/materials/edit/[materialId]/page.tsx | 76 +++++++++++++++---- .../app/content/[id]/materials/new/page.tsx | 8 +- 2 files changed, 66 insertions(+), 18 deletions(-) diff --git a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx index f22c944f..50d6cf24 100644 --- a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx +++ b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx @@ -15,6 +15,7 @@ import { showToast } from "@/lib/toast" import Image from "next/image" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" +import { useRef } from "react" interface ApiResponse { code: number @@ -77,6 +78,7 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str const [iconUrl, setIconUrl] = useState("") const [videoUrl, setVideoUrl] = useState("") const [comment, setComment] = useState("") + const fileInputRef = useRef(null) // 获取素材详情 useEffect(() => { @@ -153,22 +155,56 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str fetchMaterialDetail() }, [resolvedParams.materialId, router]) - // 模拟上传图片 + // 替换handleUploadImage为： const handleUploadImage = () => { - // 这里应该是真实的图片上传逻辑 - // 为了演示，这里模拟添加一些示例图片URL - const mockImageUrls = [ - "https://picsum.photos/id/237/200/300", - "https://picsum.photos/id/238/200/300", - "https://picsum.photos/id/239/200/300" - ] - - const randomIndex = Math.floor(Math.random() * mockImageUrls.length) - const newImage = mockImageUrls[randomIndex] - - if (!images.includes(newImage)) { - setImages([...images, newImage]) - setPreviewUrls([...previewUrls, newImage]) + if (images.length >= 9) { + showToast("最多只能上传9张图片", "error") + return + } + fileInputRef.current?.click() + } + + // 新增真实上传逻辑 + const handleFileChange = async (event: React.ChangeEvent) => { + if (images.length >= 9) { + showToast("最多只能上传9张图片", "error") + return + } + const file = event.target.files?.[0] + if (!file) return + + if (!file.type.startsWith('image/')) { + showToast("请选择图片文件", "error") + return + } + + showToast("正在上传图片...", "loading") + const formData = new FormData() + formData.append("file", file) + + try { + const token = localStorage.getItem('token'); + const headers: HeadersInit = {} + if (token) headers['Authorization'] = `Bearer ${token}` + + const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/attachment/upload`, { + method: 'POST', + headers, + body: formData, + }) + + const result = await response.json() + if (result.code === 200 && result.data?.url) { + setImages((prev) => [...prev, result.data.url]) + setPreviewUrls((prev) => [...prev, result.data.url]) + showToast("图片上传成功", "success") + } else { + showToast(result.msg || "图片上传失败", "error") + } + } catch (error: any) { + showToast(error?.message || "图片上传失败", "error") + } finally { + if (fileInputRef.current) fileInputRef.current.value = '' } } @@ -450,12 +486,20 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str variant="outline" onClick={handleUploadImage} className="w-full py-8 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50" + disabled={images.length >= 9} > 点击上传图片 - 支持 JPG、PNG 格式 + {`已上传${images.length}张，最多可上传9张`} + {previewUrls.length > 0 && (
diff --git a/Cunkebao/app/content/[id]/materials/new/page.tsx b/Cunkebao/app/content/[id]/materials/new/page.tsx index 2d021c51..e0d75751 100644 --- a/Cunkebao/app/content/[id]/materials/new/page.tsx +++ b/Cunkebao/app/content/[id]/materials/new/page.tsx @@ -52,6 +52,10 @@ export default function NewMaterialPage({ params }: { params: { id: string } }) } const handleFileChange = async (event: React.ChangeEvent) => { + if (images.length >= 9) { + showToast("最多只能上传9张图片", "error") + return + } const file = event.target.files?.[0] if (!file) return @@ -352,11 +356,11 @@ export default function NewMaterialPage({ params }: { params: { id: string } }) variant="outline" onClick={handleUploadImage} className="w-full py-8 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50" - disabled={loading} + disabled={loading || images.length >= 9} > 点击上传图片 - 支持 JPG、PNG 格式 + {`已上传${images.length}张，最多可上传9张`}