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

Question

I am new to Node.JS, I am trying to run a MERN movie ticket booking system. The following code snippet in the front end represents the function for uploading an image for a particular movie:

 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)); } };

This is my index.js in the server side:

 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}`));

Below is the code snippet for the router./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); } } );

The image fails to get uploaded and when I run inspect/console, it shows enter image description here

Answer 1

You're making a POST request to /movies/photo/someId

Your POST handler is for /movies , not /movies/photo/:id .

You need to make your URLs match!