React.js中使用Fetch/Axios发送Multipart FormData的问题求助

Hey there! Let’s work through your problems step by step—you’ve already made progress on the boundary issue, so let’s lock that in first, then tackle the photoUrl problem.

1. Solving the Multipart Boundary Problem #

The root issue here was manually setting the Content-Type header with a hardcoded boundary. When you use FormData as the request body, browsers automatically generate the correct boundary and set the Content-Type header for you. Manually specifying it creates a mismatch between the boundary you defined and the one the browser actually uses, which breaks backend parsing.

Fixed Fetch Code: #

fetch(config.baseUrl + apiEndpoint, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
    // Remove the manual Content-Type header entirely!
  },
  body: payload
})

This lets the browser handle the boundary automatically, ensuring the backend can correctly parse your form data.

2. Fixing the PhotoUrl Null/Empty Issue #

Now that the boundary is working, the next problem is that your backend isn’t returning a valid photoUrl (even though it works in Postman/Insomnia). Here are the key things to check and fix:

a. Verify You’re Sending Valid File Objects #

Make sure each item in data.orderImage is a genuine File object (e.g., from an <input type="file"> element). Add a quick check in your loop to confirm:

for (const file of data.orderImage) {
  if (file instanceof File) {
    console.log('Valid file:', file.name, file.size);
    payload.append('orderImage', file, file.name); // Explicitly include the filename
  } else {
    console.error('Invalid file object:', file);
  }
}

The third argument in append() (the filename) helps the backend correctly identify the file, which may be required for generating the photoUrl.

b. Match Postman’s Request Exacty #

Compare your frontend request to what you send in Postman:

• Check that the file field name (orderImage) matches exactly what the backend expects (Postman shows this in the form-data tab).
• Confirm all other fields (userId, materialId, etc.) are being sent with the same names and data types as in Postman.

c. Debug with Browser DevTools #

Open your browser’s DevTools > Network tab, then send the request. Look for:

• In the Headers section: Confirm Content-Type is set to multipart/form-data; boundary=----WebKitFormBoundaryXXXX (auto-generated by the browser).
• In the Form Data section: Verify all fields (including files) are present and correctly formatted. Compare this directly to Postman’s request details.

Updated Full createOrder Function #

Here’s the function with all fixes and debugging checks included:

function createOrder(data) {
  return dispatch => {
    let apiEndpoint = 'order';
    let payload = new FormData();
    
    // Handle files with validation
    for (const file of data.orderImage) {
      if (file instanceof File) {
        payload.append('orderImage', file, file.name);
        console.log('Added file:', file.name);
      } else {
        console.error('Skipping invalid file:', file);
      }
    }
    
    // Add other form fields
    payload.append('userId', data.userId);
    payload.append('materialId', data.materialId);
    payload.append('color', data.color);
    payload.append('description', data.description);
    payload.append('quantity', data.quantity);
    payload.append('city', data.city);
    payload.append('detailAddress', data.detailAddress);
    
    // Log all form data entries for debugging
    console.log('FormData content:', [...payload.entries()]);
    
    fetch(config.baseUrl + apiEndpoint, {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      },
      body: payload
    })
    .then(response => response.json())
    .then(res => {
      if(res.status === 200) { // Adjust based on your backend's response structure
        alert(res.Message);
        dispatch(createOrderSuccess(res));
        history.push('/user-order');
      } else {
        dispatch(createOrderFailed());
        alert(res.Message);
      }
    })
    .catch(error => {
      console.error('Request failed:', error);
      dispatch(createOrderFailed());
      alert('Oops, something went wrong creating your order.');
    });
  };
}

Final Debug Tip #

If you still have issues, check your backend logs to see exactly what data it’s receiving. Compare that to the data Postman sends—this will highlight any discrepancies in how fields are formatted or named.

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