Когда отправляю картинку через 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}`);
});


Ответы (0 шт):