使用Axios POST请求提交FormData至数据库无数据送达问题排查

Hey there, let's work through why your FormData isn't making it to your database. Here are the most common fixes to test out:

1. First, Check Your Backend's FormData Handling #

FormData uses the multipart/form-data content type, so your backend needs to be set up to parse this format. For example, if you're using Express:

• You'll need middleware like multer (even for text-only data, no file storage required) to extract the FormData fields:

  // Express backend example
  const multer = require('multer');
  const upload = multer(); // No storage config needed for text
  
  app.post('/addMovie', upload.none(), (req, res) => {
    console.log(req.body.movieId); // Should log the submitted value
    // Add your database save logic here
  });
  

If your backend is expecting JSON instead of FormData, you can skip FormData entirely (see point 4 below).

2. Verify Your FormData Actually Has the Value #

Before sending the request, confirm that formData contains your movieId correctly. Add this quick check inside your onSubmit function:

console.log("Raw form data:", data.movieId);
console.log("FormData stored value:", formData.get('movieId'));

// Or loop through all entries to double-check
for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

Your formData.append('movieId', data.movieId) syntax looks correct, but this will rule out if the issue is missing data from the form itself.

3. Let Axios Auto-Handle Headers (Or Explicitly Set Them Correctly) #

When you pass a FormData object to Axios, it should automatically set the Content-Type header to multipart/form-data with the right boundary. If you have custom interceptors overriding this, you can explicitly set the header (don't hardcode the boundary—Axios generates it automatically):

axios.post("http://localhost:5000/addMovie", formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

4. Simplify: Send JSON Instead of FormData (No Files Needed) #

Since you're only sending a single text field, FormData is overkill. You can send the data directly as a JSON object, which is easier to handle on both ends:

const onSubmit = data => {
  axios.post("http://localhost:5000/addMovie", { movieId: data.movieId })
    .then(response => {
      console.log("Status: ", response.status);
      console.log("Data: ", response.data);
    }).catch(error => {
      console.error('Something went wrong!', error);
    });
}

For this to work, make sure your backend parses JSON (Express does this by default with express.json()):

// Express backend for JSON payloads
app.use(express.json());

app.post('/addMovie', (req, res) => {
  console.log(req.body.movieId); // Logs the JSON movieId value
  // Database save logic here
});

Start with checking your backend configuration first—this is the most common reason FormData fails to be received. Let me know if any of these get your data flowing to the database!

内容的提问来源于stack exchange，提问作者user16697052