diff --git a/frontend/src/apis/post.api.ts b/frontend/src/apis/post.api.ts index 489ad51f6942a5eb087c1121904fbed6f4542384..f96f89dc5edf764bce08ba526bcb018ce05d14d9 100644 --- a/frontend/src/apis/post.api.ts +++ b/frontend/src/apis/post.api.ts @@ -33,3 +33,8 @@ export const updating = async (post: PostType) => { const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post); return data; }; + +export const postImg = async (formdata: FormData) => { + const { data } = await axios.post(`${baseUrl}/posts`, formdata); + return data; +}; diff --git a/frontend/src/post/intopost.tsx b/frontend/src/post/intopost.tsx index fa3cb14702d266e374469ea97985902d4c2769cd..03d9943d8e19387461a88ebe632db3c96429895e 100644 --- a/frontend/src/post/intopost.tsx +++ b/frontend/src/post/intopost.tsx @@ -27,12 +27,12 @@ export function IntoPost() {
- +
diff --git a/frontend/src/post/posting.tsx b/frontend/src/post/posting.tsx index 8b359cefc311bf768b22321cfd11aef7f16791c1..d2f693f8edc6e8297391db6fb2adcb9e11daaa0b 100644 --- a/frontend/src/post/posting.tsx +++ b/frontend/src/post/posting.tsx @@ -1,16 +1,19 @@ -import React, { FormEvent, useState } from "react"; +import React, { FormEvent, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import isLength from "validator/lib/isLength"; import equals from "validator/lib/equals"; import { catchErrors } from "../helpers"; import { PostType } from "../types"; import { postApi } from "../apis"; +import { File } from "formidable"; export default function Posting() { - const [city, setCity] = useState("질문종류"); - const [theme, setTheme] = useState("질문종류"); + const [city, setCity] = useState("city"); + const [theme, setTheme] = useState("theme"); const [title, setTitle] = useState(""); const [text, setText] = useState(""); + const [file, setFile] = useState(); + const [imgSrc, setImgSrc] = useState(); const navigate = useNavigate(); const [user, setUser] = useState({ @@ -29,6 +32,23 @@ export default function Posting() { const [disabled, setDisabled] = useState(false); const [success, setSuccess] = useState(false); + useEffect(() => { + console.log("uploaded imgs", imgSrc); + }, [imgSrc]); + + const imgArr = new Array(); + + const sendImg2Db = async (filelist: FileList) => { + const formdata = new FormData(); + if (!(filelist === undefined || filelist === null)) { + for (var i = 0; i < filelist.length; i++) { + formdata.append(`picture${i}`, filelist?.[i]); + } + console.log("formdata", formdata); + await postApi.postImg(formdata); + } + }; + async function handlePostSubmit(event: FormEvent) { event.preventDefault(); @@ -37,6 +57,7 @@ export default function Posting() { console.log("user data", user); if (postingFormMatch()) { setLoading(true); + // sendImg2Db(); const res = await postApi.posting(user); console.log("서버연결됬나요", res); // console.log("user save"); @@ -102,16 +123,41 @@ export default function Posting() { setUser(newUser); }; + const handleInputPic = async (event: React.ChangeEvent) => { + event.preventDefault(); + + const maxImg = 10; + const { files } = event.target; + if (!(files?.length === undefined)) { + if (files?.length <= maxImg) { + for (var i = 0; i < files.length; i++) { + const reader = new FileReader(); + reader.readAsDataURL(files?.[i]); + + reader.onload = (e) => { + imgArr.push(e.target?.result); + setImgSrc(imgArr); + }; + } + } else { + alert("사진은 최대 10장까지 업로드 가능합니다!"); + } + } + }; + return ( -
+

Id

-

empty

+

empty

+
+ +
@@ -151,26 +197,31 @@ export default function Posting() {
-
+
-
+
+
+ {imgSrc?.map((img, i) => ( + + ))} +