Commit 3218e54c authored by Lee Soobeom's avatar Lee Soobeom
Browse files

posting files upload

parent 4fba10b8
...@@ -33,3 +33,8 @@ export const updating = async (post: PostType) => { ...@@ -33,3 +33,8 @@ export const updating = async (post: PostType) => {
const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post); const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post);
return data; return data;
}; };
export const postImg = async (formdata: FormData) => {
const { data } = await axios.post(`${baseUrl}/posts`, formdata);
return data;
};
...@@ -27,12 +27,12 @@ export function IntoPost() { ...@@ -27,12 +27,12 @@ export function IntoPost() {
<div className="flex flex-row basis-8 gap-x-1"> <div className="flex flex-row basis-8 gap-x-1">
<div className="border-2 border-sky-300 border-current rounded"> <div className="border-2 border-sky-300 border-current rounded">
<button id={post._id} onClick={handleDeleteClick}> <button id={post._id} onClick={handleDeleteClick}>
delete 삭제
</button> </button>
</div> </div>
<div className="border-2 border-sky-300 border-current rounded"> <div className="border-2 border-sky-300 border-current rounded">
<Link to="/edit" state={post}> <Link to="/edit" state={post}>
<button>update</button> <button>수정</button>
</Link> </Link>
</div> </div>
</div> </div>
......
import React, { FormEvent, useState } from "react"; import React, { FormEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import isLength from "validator/lib/isLength"; import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals"; import equals from "validator/lib/equals";
...@@ -8,8 +8,8 @@ import { postApi } from "../apis"; ...@@ -8,8 +8,8 @@ import { postApi } from "../apis";
import { File } from "formidable"; import { File } from "formidable";
export default function Posting() { export default function Posting() {
const [city, setCity] = useState<string>("질문종류"); const [city, setCity] = useState<string>("city");
const [theme, setTheme] = useState<string>("질문종류"); const [theme, setTheme] = useState<string>("theme");
const [title, setTitle] = useState<string>(""); const [title, setTitle] = useState<string>("");
const [text, setText] = useState<string>(""); const [text, setText] = useState<string>("");
const [file, setFile] = useState<File>(); const [file, setFile] = useState<File>();
...@@ -27,26 +27,28 @@ export default function Posting() { ...@@ -27,26 +27,28 @@ export default function Posting() {
_id: "", _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 [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = 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) { async function handlePostSubmit(event: FormEvent) {
event.preventDefault(); event.preventDefault();
...@@ -55,6 +57,7 @@ export default function Posting() { ...@@ -55,6 +57,7 @@ export default function Posting() {
console.log("user data", user); console.log("user data", user);
if (postingFormMatch()) { if (postingFormMatch()) {
setLoading(true); setLoading(true);
// sendImg2Db();
const res = await postApi.posting(user); const res = await postApi.posting(user);
console.log("서버연결됬나요", res); console.log("서버연결됬나요", res);
// console.log("user save"); // console.log("user save");
...@@ -120,20 +123,24 @@ export default function Posting() { ...@@ -120,20 +123,24 @@ export default function Posting() {
setUser(newUser); setUser(newUser);
}; };
const handleInputPic = (event: React.ChangeEvent<HTMLInputElement>) => { const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
// const fileArr = new FileList; event.preventDefault();
const maxImg = 5;
const fileArr = event.target.files; const maxImg = 10;
if (!(fileArr?.length === undefined)) { const { files } = event.target;
if (!(fileArr?.length > maxImg)) { if (!(files?.length === undefined)) {
for (var i = 0; i < maxImg; i++) { if (files?.length <= maxImg) {
// setFile(file); for (var i = 0; i < files.length; i++) {
console.log(fileArr[i]); const reader = new FileReader();
img2Url(fileArr[i]); reader.readAsDataURL(files?.[i]);
reader.onload = (e) => {
imgArr.push(e.target?.result);
setImgSrc(imgArr);
};
} }
setImgSrc(imgArr);
} else { } else {
alert("사진은 최대 5장까지 업로드 가능합니다!"); alert("사진은 최대 10장까지 업로드 가능합니다!");
} }
} }
}; };
...@@ -145,7 +152,7 @@ export default function Posting() { ...@@ -145,7 +152,7 @@ export default function Posting() {
<p className="basis-1/12 gap-x-8">Id</p> <p className="basis-1/12 gap-x-8">Id</p>
<p className="basis-6/12 invisible">empty</p> <p className="basis-6/12 invisible">empty</p>
<div className="basis-2/12 border-2 border-sky-300"> <div className="basis-2/12 border-2 border-sky-300">
<input type="file" multiple onChange={handleInputPic}></input> <input type="file" multiple onChange={handleInputPic} />
</div> </div>
<select <select
name="city" name="city"
...@@ -204,14 +211,11 @@ export default function Posting() { ...@@ -204,14 +211,11 @@ export default function Posting() {
className="w-full h-8 border-2 border-sky-300" className="w-full h-8 border-2 border-sky-300"
></textarea> ></textarea>
</div> </div>
<div className="flex flex-col "> <div className="flex flex-col">
<div className="flex"> <div className="flex h-48 overflow-x-scroll">
{/* {imgSrc?.map((img, i) => ( {imgSrc?.map((img, i) => (
<div> <img key={i} src={img} width={200} height={200} />
<img key={i} src={img} width={200} height={200} /> ))}
</div>
))} */}
{/* <img src={imgSrc?.[0]} width={200} height={200} /> */}
</div> </div>
<textarea <textarea
onChange={textChange} onChange={textChange}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment