인프런 커뮤니티 질문&답변

시함님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

multer를 이용하여 이미지 저장[삭제 예정]

5:40 404 에러 도와주세요 ㅠㅠ

작성

·

451

1

좋은 강의 항상 감사드립니다.

오타때문인가 싶어 강의도 돌려보고 올라와있는 질문들 다 읽어보았는데도 끝내 해결하지 못해 이렇게 질문드립니다.

일단 위 사진은 콘솔 창에서의 에러이구요...

소스코드 첨부하겠습니다.

FileUpload.js

import React from "react";
import Dropzone from "react-dropzone";
import { Icon } from "antd";
import axios from "axios";

function FileUpload() {
const dropHanler = (files) => {
let formData = new FormData();

const config = {
header: { "content-type": "multipart/form-data" },
};
formData.append("file", files[0]);
axios.post("/api/product/image", formData, config).then((response) => {
if (response.data.success) {
console.log(response.data);
} else {
alert("파일을 저장하는데 실패했습니다.");
}
});
};

return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Dropzone onDrop={dropHanler}>
{({ getRootProps, getInputProps }) => (
<div
style={{
width: 300,
height: 240,
border: "1px solid lightgray",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
{...getRootProps()}
>
<input {...getInputProps()} />
<Icon type="plus" style={{ fontSize: "3rem " }} />
</div>
)}
</Dropzone>
</div>
);
}

export default FileUpload;

product.js

const express = require("express");
const router = express.Router();
const multer = require("multer");

//=================================
// Product
//=================================

var storage = multer.diskStorage({
// destination: 파일이 어디에 저장되는지 알려줌
destination: function (req, file, cb) {
cb(null, "uploads/");
},
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`);
},
});

var upload = multer({ storage: storage }).single("file");

router.post("/image", (req, res) => {
// 가져온 이미지를 저장해주면 된다
upload(req, res, (err) => {
if (err) {
return res.json({ success: false, err });
}
return res.json({
success: true,
filePath: res.req.file.path,
fileName: res.req.file.filename,
});
});
});

module.exports = router;

index.js(강의에서 손댄 부분만)

app.use("/api/users", require("./routes/users"));
app.post("/api/product", require("./routes/product"));

//use this to show the image you have in node js server to client (react js)
//https://stackoverflow.com/questions/48914987/send-image-path-from-node-js-express-server-to-react-client
app.use("/uploads", express.static("uploads"));

몽고db연결도 잘 되었고, 별 다른 에러가 뜨지 않아 터미널 로그는 따로 첨부하지 않았습니다.

혼자 해결해보려고 3시간 붙잡다 이렇게 질문드립니다... ㅠㅠ 꼭 답변 부탁드리겠습니다.. ㅠㅠ

답변 2

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 

404에러면  요청의 경로에 맞는 핸들러가 없어서 나오는 에러인데 현재 
/api/product/image 잘 맞춰서 가고 있어서  혹시 proxy를 잘적용하셨나요 ?~!  

그래서   3000포트에서 자동으로 5000으로 라우팅이되야하는데     그 프록시 부분을 잘 설정하셨는지 궁금합니다 ~ 

0

시함님의 프로필 이미지
시함
질문자

해결했습니다. 결국엔 오타문제였네요 ㅎ ㅠㅠ 감사합니다!!!

시함님의 프로필 이미지

작성한 질문수

질문하기