인프런 커뮤니티 질문&답변
작성한 질문수
이미지 업로드 질문
해결된 질문
작성
·
238
0
const dispatch = useDispatch();
const [Image, setImage] = useState("");
const fileupload = (files) => {
let formData = new FormData();
const config = {
header: { "content-type": "multipart/form-data" },
};
formData.append("file", files[0]);
dispatch(imageupload(formData, config)).then((response) => {
if (response.payload.success) {
console.log(response);
setImage(response.payload.filePath);
} else {
alert("파일을 저장하는데 실패했습니다.");
}
});
};
return (
<Dropzone onDrop={fileupload}>
{({ getRootProps, getInputProps }) => (
<div
style={{
width: "300px",
height: "300px",
borderRadius: "50%",
border: "1px solid",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
{...getRootProps()}
>
<input {...getInputProps()} />
{Image && (
<img
style={{ minWidth: "300px", width: "300px", height: "240px" }}
src={`http://localhost:5000/${Image}`}
/>
)}
</div>
)}
</Dropzone>
GET http://localhost:5000/uploads/1588870136518_d.gif 404 (Not Found)
이렇게 에러 메세지가 나오네요.... 경로 지정 되는 기준이 어떻게 되나요??
배포 까지해서 제작중인데 이 방법으로 해도 되는건가요?
답변 2
1
John Ahn
지식공유자
이건 Node js 에서 그 Static 한 파일을 어떻게 보이게 할건지를 설정하느냐에 따라 달라집니다
혹시 server/index.js 파일 봐보시면
아마 이렇게 되있을거에요 ~
app.use('/uploads', express.static('uploads'));
이뜻은 uploads 폴더 안에 있는 파일들을 localhost:5000/"uploads"/ => 이런식으로 표출할수 있게 만드는 것이에요.
Not Found가 나온다는건 지금 Image가 uploads 폴더안에 없어서 그런것 같은데
혹시 uploads 폴더 안에 이미지가 잘들어가 있나요 ?
배포 할때는 도메인에 따라서 localhost 부분을 바꿔주시면 됩니다 ^^
0
