上传图片时 Node/Express 无法 POST 错误（React 前端）

Question

我是 Node.JS 的新手，我正在尝试运行 MERN 电影票预订系统。下面的前端代码sn-p表示为特定电影上传图片的函数：

export const uploadMovieImage = (id, image) => async dispatch => {
  try {
    const data = new FormData();
    data.append('file', image);
      const url = '/movies/photo/' + id;
      console.log(url);
    const response = await fetch(url, {
      method: 'POST',
      body: data
    });
      console.log(response);
      const responseData = await response.json();
      console.log(responseData);
    if (response.ok) {
      dispatch(setAlert('Image Uploaded', 'success', 5000));
    }
      if (responseData.error) {
          console.log("error 2");
      dispatch(setAlert(responseData.error.message, 'error', 5000));
    }
  } catch (error) {
      console.log("error");
 
    dispatch(setAlert(error.message, 'error', 5000));
  }
};

这是我在服务器端的 index.js：

const express = require('express');
const path = require('path');

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config({ path: path.join(__dirname, '../.env') });
}

require('./db/mongoose');

// Routes
const userRouter = require('./routes/users');
const movieRouter = require('./routes/movies');
const cinemaRouter = require('./routes/cinema');
const showtimeRouter = require('./routes/showtime');
const reservationRouter = require('./routes/reservation');
const invitationsRouter = require('./routes/invitations');

const app = express();
app.disable('x-powered-by');
const port = process.env.PORT || 8080;

// Serve static files from the React app
app.use(express.static(path.join(__dirname, '../../../client/build')));
app.use('/uploads', express.static(path.join(__dirname, '../uploads')));

app.use(function(req, res, next) {
  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', '*');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,X-Access-Token,XKey,Authorization'
  );

  //  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  // Pass to next layer of middleware
  next();
});
app.use(express.json());
app.use(userRouter);
app.use(movieRouter);
app.use(cinemaRouter);
app.use(showtimeRouter);
app.use(reservationRouter);
app.use(invitationsRouter);

 //app.get('/api/test', (req, res) => res.send('Hello World'))

// The "catchall" handler: for any request that doesn't
// match one above, send back React's index.html file.
//app.use(bodyParser.urlencoded({ extended: false }))
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname + '../../../client/build/index.html'));
});
app.listen(port, () => console.log(`app is running in PORT: ${port}`));

下面是路由器的代码 sn-p ./routes/movies

// Create a movie
router.post('/movies', auth.enhance, async (req, res) => {
  const movie = new Movie(req.body);
  try {
    await movie.save();
    res.status(201).send(movie);
  } catch (e) {
    res.status(400).send(e);
  }
});

router.get(
  '/movies/photo/:id',
  auth.enhance,
  upload('movies').single('file'),
  async (req, res, next) => {
      const url = `${req.protocol}://${req.get('host')}`;
      console.log(url);
    const { file } = req;
    const movieId = req.params.id;
    try {
      if (!file) {
        const error = new Error('Please upload a file');
        error.httpStatusCode = 400;
        return next(error);
      }
      const movie = await Movie.findById(movieId);
      if (!movie) return res.sendStatus(404);
      movie.image = `${url}/${file.path}`;
      await movie.save();
      res.send({ movie, file });
    } catch (e) {
      console.log(e);
      res.sendStatus(400).send(e);
    }
  }
);

图片上传失败，当我运行检查/控制台时，它显示enter image description here

Answer 1

您正在向/movies/photo/someId 发出 POST 请求

您的 POST 处理程序适用于 /movies，而不是 /movies/photo/:id。

您需要使您的网址匹配！