Когда отправляю картинку через form-data на сервер - req.file возвращает undefined
На фронте использую axios для запросов, сам файл на фронте перед запросом отображается нормально
На сервере принимаю файлы с помощью multer, ключ правильный, но приходит undefined
Не пойму, то ли это из-за того что файл не так отправляется с фронта, то ли на беке что-то не так, хотя все по методичке вроде
фронтент
// обработчики в модуле
const dropHandler = (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
const data = new FormData();
data.append("newimg", file);
console.log(file, data.get("img"));
setImage(`/images/${file.name}`);
setImgPublic(data)
};
const submit = () => {
console.log(check, banner, button, href, image);
BannersStore.putBanner(props.item.id, image, banner, button, href, check);
BannersStore.putImg(imgPublic);
};
// поле куда кладется файл
<div
onDragStart={(e) => dragInHandler(e)}
onDragLeave={(e) => dragLeaveHandler(e)}
onDragOver={(e) => dragInHandler(e)}
onDrop={(e) => dropHandler(e)}
className={s.banners__drag_on}
>
<img alt="upload" src={upload} style={{ marginBottom: "10px" }} />
Отпустите файл чтобы загрузить его
</div>
// Сервис, отсылающий на бек
static upload = async (img) => {
return await axios.post(
`${API_URL}/upload`,
{ img },
{
headers: {
"Content-type": "multipart/form-data",
},
}
);
};
сервер
// тут решил не парится и обработку загрузки файла закинул прям в индекс
require('dotenv').config()
const express = require("express");
const cookieParser = require('cookie-parser')
const multer = require('multer')
const cors = require("cors");
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000; //Line 3
const bannersRouter = require("./routes/banners");
const concertsRouter = require("./routes/concerts");
const programsRouter = require("./routes/programs");
const albumsRouter = require("./routes/albums");
const songsRouter = require("./routes/songs");
const userRouter = require("./routes/users");
const corsOptions = {
origin: "http://localhost:3000",
credentials: true, //access-control-allow-credentials:true
optionSuccessStatus: 200,
};
app.use(cors(corsOptions));
app.use(express.json());
app.use(cookieParser());
app.use(bodyParser.json());
app.use(
express.urlencoded({
extended: true,
})
);
app.get("/", (req, res) => {
res.json({ message: "ok" });
});
app.use("/banners", bannersRouter);
app.use("/concerts", concertsRouter);
app.use("/programs", programsRouter);
app.use("/albums", albumsRouter);
app.use("/songs", songsRouter);
app.use("/user", userRouter);
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "public/images/")
},
filename: (req, file, cb) => {
cb(null, file.originalname)
},
})
const uploadStorage = multer({ storage: storage })
app.post("/upload", uploadStorage.single("newimg"), (req, res) => {
console.log(req.file)
return res.send("Single file")
})
/* Error handler middleware */
app.use((err, req, res, next) => {
const statusCode = err.statusCode || 500;
console.error(err.message, err.stack);
res.status(statusCode).json({ message: err.message });
return;
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});