React Native上传图片至wp/v2/media接口失败求助

Hey there, I’ve run into exactly the same frustrating WP REST API media upload hurdles before—let’s break down the key points you’re missing:

1. Correct multipart/form-data Setup #

Postman works when you select a file because it handles all the behind-the-scenes details automatically, but when you manually construct the request, these are non-negotiable:

• Don’t manually set the boundary in the Content-Type header. Let your HTTP client (like cURL, Axios, etc.) generate this automatically—manual boundaries almost always mismatch what’s in the request body.
• The file field must be named file—WP’s API explicitly expects this key for uploads. For example, a valid cURL request would look like:

  curl -X POST -u "your-username:your-password" "https://your-site/wp-json/wp/v2/media" -F "file=@/local/path/to/your-image.png"
  

• Ensure you’re authenticated with a user account that has upload/edit permissions (anonymous uploads are disabled by default).

2. Fixing the Base64 Empty Image Problem #

Your empty image issue is almost certainly due to including the data:image/png;base64, prefix in your base64 string. Here’s the correct way to use base64:

• Send a POST request with Content-Type: application/json
• Wrap your data in a JSON object with these required fields:

  {
    "filename": "your-image.png",
    "type": "image/png",
    "content": "iVBORw0KGgoAAAANSUhEUgAA..." // Base64 string WITHOUT the data URI prefix
  }
  

WP can’t parse the data URI prefix, so stripping it will make the image render correctly.

3. Why image/png Direct Uploads Fail #

WP’s REST API media endpoint doesn’t support raw binary uploads (i.e., setting Content-Type: image/png and sending the image data directly as the request body). You have to use either multipart/form-data with the file field, or the JSON base64 method above.

Quick Debug Tips #

• Always check the API’s response body—WP returns specific error messages (like "invalid field name" or "insufficient permissions") that can point you straight to the issue.
• Double-check your authentication header (Basic Auth, JWT, etc.) to make sure it’s being sent correctly.

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