posting files upload

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;
+};

frontend/src/post/intopost.tsx

@@ -27,12 +27,12 @@ export function IntoPost() {
           <div className="flex flex-row basis-8 gap-x-1">
             <div className="border-2 border-sky-300 border-current rounded">
               <button id={post._id} onClick={handleDeleteClick}>
-                delete
+                삭제
               </button>
             </div>
             <div className="border-2 border-sky-300 border-current rounded">
               <Link to="/edit" state={post}>
-                <button>update</button>
+                <button>수정</button>
               </Link>
             </div>
           </div>

frontend/src/post/posting.tsx

-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";
@@ -8,8 +8,8 @@ import { postApi } from "../apis";
 import { File } from "formidable";
 
 export default function Posting() {
-  const [city, setCity] = useState<string>("질문종류");
-  const [theme, setTheme] = useState<string>("질문종류");
+  const [city, setCity] = useState<string>("city");
+  const [theme, setTheme] = useState<string>("theme");
   const [title, setTitle] = useState<string>("");
   const [text, setText] = useState<string>("");
   const [file, setFile] = useState<File>();
@@ -27,26 +27,28 @@ export default function Posting() {
     _id: "",
   });
 
-  const imgArr = new Array();
-
-  const img2Url = (fileBlob: Blob) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(fileBlob);
-
-    reader.onload = (data) => {
-      if (typeof data.target?.result === "string") {
-        console.log(data.target?.result);
-        imgArr.push(data.target?.result);
-        // setImgSrc(data.target?.result);
-      }
-    };
-  };
-
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   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();
 
@@ -55,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");
@@ -120,20 +123,24 @@ export default function Posting() {
     setUser(newUser);
   };
 
-  const handleInputPic = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // const fileArr = new FileList;
-    const maxImg = 5;
-    const fileArr = event.target.files;
-    if (!(fileArr?.length === undefined)) {
-      if (!(fileArr?.length > maxImg)) {
-        for (var i = 0; i < maxImg; i++) {
-          // setFile(file);
-          console.log(fileArr[i]);
-          img2Url(fileArr[i]);
-        }
+  const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    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("사진은 최대 5장까지 업로드 가능합니다!");
+        alert("사진은 최대 10장까지 업로드 가능합니다!");
       }
     }
   };
@@ -145,7 +152,7 @@ export default function Posting() {
           <p className="basis-1/12 gap-x-8">Id</p>
           <p className="basis-6/12 invisible">empty</p>
           <div className="basis-2/12 border-2 border-sky-300">
-            <input type="file" multiple onChange={handleInputPic}></input>
+            <input type="file" multiple onChange={handleInputPic} />
           </div>
           <select
             name="city"
@@ -204,14 +211,11 @@ export default function Posting() {
             className="w-full h-8 border-2 border-sky-300"
           ></textarea>
         </div>
-        <div className="flex flex-col ">
-          <div className="flex">
-            {/* {imgSrc?.map((img, i) => (
-              <div>
+        <div className="flex flex-col">
+          <div className="flex h-48 overflow-x-scroll">
+            {imgSrc?.map((img, i) => (
               <img key={i} src={img} width={200} height={200} />
-              </div>
-            ))} */}
-            {/* <img src={imgSrc?.[0]} width={200} height={200} /> */}
+            ))}
           </div>
           <textarea
             onChange={textChange}