Hey there! Let's break down what's going on with your FormData problem and get your file upload working smoothly.

First, let's clear up a key misunderstanding: the _parts structure you're seeing is totally normal for FormData objects in JavaScript (and React Native). FormData internally stores its key-value pairs in this array format, and you won't be able to access it directly like a plain object. This isn't the reason your file isn't sending to the server—your actual issue lies in how you're constructing the FormData and handling the request.

Here are the critical fixes you need to make: #

1. Use actual file variables instead of string literals
   In your code, you're passing strings like 'file.name' instead of referencing the real properties of your file object. This means the server will receive a filename literally called "file.name" instead of your actual file's name. Remove the quotes around those values to use your actual file data:

   // Wrong: passes static string literals
   // name: 'file.name', size: 'file.size'
   
   // Correct: uses your file object's real properties
   name: file.name,
   size: file.size,
   type: file.type,
   

2. Provide a valid file URI
   Your uri: 'file://' is a placeholder with no actual file path. You need to use the real URI from the file you're trying to upload—this usually comes from a library like react-native-image-picker or the system's native file picker. Also, note that iOS sometimes requires stripping the file:// prefix for the URI to work:

   import { Platform } from 'react-native';
   
   // Use the real URI from your file object, adjust for iOS
   uri: Platform.OS === 'ios' ? file.uri.replace('file://', '') : file.uri,
   

3. Don't manually set the Content-Type header
   When sending the FormData via fetch or axios, let React Native auto-generate the Content-Type header. If you manually set multipart/form-data, you'll miss the critical boundary parameter that tells the server how to parse the request correctly.

Here's your corrected, working code example: #

import { Platform } from 'react-native';

// Assume `file` is the file object you retrieved (e.g., from ImagePicker)
const fileToSend = new FormData();
fileToSend.append('File', {
  name: file.name,
  size: file.size,
  type: file.type,
  uri: Platform.OS === 'ios' ? file.uri.replace('file://', '') : file.uri,
});

// Example using fetch to send the upload request
fetch('https://your-server-upload-endpoint.com', {
  method: 'POST',
  body: fileToSend,
  // No manual Content-Type header needed!
})
.then(response => response.json())
.then(data => console.log('Upload successful:', data))
.catch(error => console.error('Upload failed:', error));

Additional Tips: #

• If you're using axios instead of fetch, the same rules apply—pass the FormData as the data property and skip manually setting the Content-Type header.
• Double-check that your server is configured to handle multipart/form-data requests (for example, using multer in Express, or the appropriate parser for your backend framework).

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