Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
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