-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
로컬 서버에 이미지 등록은 성공했는데, 프론트에서 썸네일 이미지가 보이지 않습니다.
20.03.11 16:34 작성 조회수 581
0
현재상태
1. 이미지 등록을 누르면 서버에 post로 요청한 결과 값을 result로 받아 리덕스에 등록되어있습니다.
2. 네트워크 상태에 위와 같은 메시지가 나오면서 썸네일이 동작되지 않습니다.
3. 오타를 확인해봤지만, 확인하지 못했습니다.
4. 어디가 문제일까요?
postcard.js
const onChangeImages = useCallback(e => {
console.log(e.target.files);
const imageFormData = new FormData();
[].forEach.call(e.target.files, f => {
imageFormData.append("image", f);
});
dispatch({
type: UPLOAD_IMAGES_REQUEST,
data: imageFormData
});
}, []);
// 이미지 업로드 버튼 클릭시, 이미지 업로드할 수 있는 Input이 열리도록
const onClickImageUpload = useCallback(() => {
imageInput.current.click(); // 이미지 업로드 할 수 있는 input form open
}, [imageInput.current]);
return (
<Form
onSubmit={onSubmit}
style={{ margin: "10px 0 20px" }}
encType="multipart/form-data"
>
<Input.TextArea
style={{ height: "120px" }}
value={text}
onChange={onChangeText}
/>
<div>
<input
type="file"
multiple
hidden
ref={imageInput}
onChange={onChangeImages}
/>
<Button onClick={onClickImageUpload}>이미지 업로드</Button>
<Button type="primary" htmlType="submit" loading={isAddingPost}>
Twit
</Button>
</div>
<div>
{imagePaths.map(v => {
return (
<div>
<div>
<Button>삭제</Button>
</div>
<img
src={`http://localhost:3065" + ${v}`}
style={{ width: "200px" }}
alt={v}
/>
</div>
);
})}
</div>
</Form>
);
};
서버 index.js
const express = require("express");
const app = express();
const morgan = require("morgan");
const db = require("./models");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const expressSession = require("express-session");
const dotenv = require("dotenv"); // dotdev 모듈을 불러와서
const passport = require("passport");
const passportConfig = require("./passport");
dotenv.config(); // 실행
db.sequelize.sync();
passportConfig(); // passport index에서 보내주는 함수를 실행
app.use("/", express.static("uploads")); // express 내부의 static이란 미들웨어를 통해
app.use(
cors({
origin: true, //"http://localhost:3000" 로도 가능, 단 서버 재실행 하기
credentials: true
})
); // cors 미들웨어 장착
app.use(cookieParser("nodebirdcookie"));
app.use(
expressSession({
resave: false,
saveUninitialized: false,
secret: process.env.COOKIE_SECRET,
cookie: {
httpOnly: true,
secure: false
},
name: "rnbck"
})
);
app.use(passport.initialize());
app.use(passport.session());
app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const userAPIRouter = require("./routes/user");
const postAPIRouter = require("./routes/post");
const postsAPIRouter = require("./routes/posts");
const hashtagAPIRouter = require("./routes/hashtag");
app.use("/api/user", userAPIRouter);
app.use("/api/post", postAPIRouter);
app.use("/api/posts", postsAPIRouter);
app.use("/api/hashtag", hashtagAPIRouter);
app.listen(3065, () => {
console.log("server is running on http://localhost:3065");
});
서버 post router
const express = require("express");
const router = express.Router();
const db = require("../models");
const multer = require("multer");
const { isLoggedIn } = require("./middleware");
const path = require("path");
const upload = multer({
storage: multer.diskStorage({
destination(req, file, done) {
done(null, "uploads");
},
filename(req, file, done) {
const ext = path.extname(file.originalname);
const basename = path.basename(file.originalname, ext);
done(null, basename + new Date().valueOf() + ext);
}
}),
limits: { fileSize: 20 * 1024 * 1024 }
});
router.post("/images", upload.array("image"), (req, res) => {
console.log(req.files);
res.json(req.files.map(v => v.filename));
});
});
module.exports = router;
답변을 작성해보세요.
답변 2