Получение пустых файловых объектов из интерфейса в серверную часть React и NodeJS

#node.js #reactjs

Вопрос:

Привет, я пытаюсь загрузить файл на сервер, отправленный с помощью axios. Чтобы отправить его, я использую react с крючками и useState, дело в том, что когда я делаю консоль.журнал файла во внешнем интерфейсе показывает все правильно, но когда я отправляю его на серверную часть, я получаю его пустым.

Вот пример того, что показывает интерфейс с console.log():

введите описание изображения здесь

Вот функция, которую я использую для отправки 3 файлов в бэкэнд, и различные вещи, такие как крючки реакции и то, что мне нужно:

   const [weight, setWeight] = useState("");
  const [frontPhoto, setFrontPhoto] = useState({});
  const [sidePhoto, setSidePhoto] = useState({});
  const [backPhoto, setBackPhoto] = useState({});

  const JWT = new ClassJWT();
  const axiosReq = axios.create();

  const [uploadErrors, setUploadErrors] = useState([{}]);

  const upload  = async (e) => {
    e.preventDefault();
    await JWT.checkJWT();
    console.log(frontPhoto);
    axiosReq.post("http://localhost:3001/upload-progress", {
      weight,
      frontPhoto,
      sidePhoto,
      backPhoto,
      token: JWT.getToken()
    }).then((response) => {
      console.log(response);
      if (response.data.statusCode === '200') {

      } else {

      }
    });
  };
 

А затем в бэкэнде de console.log() выглядит так:

 {
  weight: '70',
  frontPhoto: {},
  sidePhoto: {},
  backPhoto: {},
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjI2NTk3Mjg1LCJleHAiOjE2MjY1OTgxODV9.njDz7BZX57NvAK399abQLhoelpTS4kStj4LBzjw5gR8'
}
 

Вот код маршрутизатора, который я использую для этой загрузки:

 routerProgress.post("/upload-progress", verifyJWT, async (req, res) => {
  console.log(req.body);
}
 

А вот и вся конфигурация сервера:

 import express from 'express';
import sequelize from './db/db.js';
import cors from 'cors';
import fileUpload from 'express-fileupload';

// SERVER CONFIGURATION
const app = express();
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
    console.log(`Listening at ${PORT}`);
    sequelize.sync({ force: false })
        .then(() => console.log('Database Connected!'))
        .catch(err => console.log(err));
});

// BODYPARSER
app.use(express.json({limit: '50mb'}));
app.use(express.urlencoded({ limit: '50mb', extended: true, parameterLimit: 50000}));
app.use(cors({
    origin: ["http://localhost:3000"],
    methods: ["GET", "POST"],
    credentials: true
}));
app.use(fileUpload({
    createParentPath: true
}));

// ROUTES
import { routerAuthentication } from './routes/authentication.js';
import { routerProgress } from './routes/progress.js';
app.use(routerAuthentication);
app.use(routerProgress);
 

Я не знаю, как это решить, я много чего перепробовал, но ничего не получается. Пожалуйста, если кто-нибудь знает, что я могу сделать, чтобы решить эту проблему, я буду ему очень благодарен. Спасибо!

Комментарии:

1. Где вы выполняете сетфронтфото, сетсидефото и т.д.? Вы можете показать нам этот код?

2. express изначально не разрешает размещать файлы на сервере, вам нужно использовать что-то вроде multer или экспресс-загрузки файлов или другие промежуточные программы, подобные той, которая обрабатывает файлы для вас.