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 (
-