Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
students
travel
Commits
3218e54c
Commit
3218e54c
authored
Jul 22, 2022
by
Lee Soobeom
Browse files
posting files upload
parent
4fba10b8
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/apis/post.api.ts
View file @
3218e54c
...
...
@@ -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
View file @
3218e54c
...
...
@@ -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
View file @
3218e54c
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
);
};
}
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>
<img key={i} src={img} width={200} height={200} />
</div>
))} */
}
{
/* <img src={imgSrc?.[0]} width={200} height={200} /> */
}
<
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
>
<
textarea
onChange
=
{
textChange
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment