-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
5:40 404 에러 도와주세요 ㅠㅠ
21.06.02 16:38 작성 조회수 303
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시간 붙잡다 이렇게 질문드립니다... ㅠㅠ 꼭 답변 부탁드리겠습니다.. ㅠㅠ
답변을 작성해보세요.
1
John Ahn
지식공유자2021.06.03
안녕하세요
404에러면 요청의 경로에 맞는 핸들러가 없어서 나오는 에러인데 현재
/api/product/image 잘 맞춰서 가고 있어서 혹시 proxy를 잘적용하셨나요 ?~!
그래서 3000포트에서 자동으로 5000으로 라우팅이되야하는데 그 프록시 부분을 잘 설정하셨는지 궁금합니다 ~
0
답변 2