React通过Carrierwave向Rails API上传图片失败问题求助

Hey there! I’ve dealt with this exact issue a bunch of times—getting file uploads to play nice between React and Rails with CarrierWave can be tricky if you’re not using the right format. Let’s walk through what’s going wrong and how to fix it.

The Root of the Problem #

Your two main issues boil down to how you’re sending the data:

• When you use JSON.stringify, Rails receives the data but CarrierWave can’t process it because it expects a file object (not a JSON string).
• When you don’t stringify, you’re probably not formatting the request correctly for Rails’ parameter structure, leading to the ActionController::ParameterMissing error.

Step 1: Use FormData Instead of JSON #

Files are binary data, so you can’t send them as JSON. You need to use the browser’s FormData API to wrap the file and any other parameters. This is exactly what ActiveAdmin uses under the hood, which is why that works!

Example React Code (with react-dropzone)

Here’s how to adjust your dropzone handler and request:

// Handle file selection from react-dropzone
const handleFileDrop = (acceptedFiles) => {
  const file = acceptedFiles[0]; // Grab the first selected file
  uploadEventImage(file);
};

// Upload function using fetch (works with axios too)
const uploadEventImage = async (file) => {
  const formData = new FormData();
  // Critical: Use `event[image]` to match Rails' nested parameter structure
  formData.append('event[image]', file);
  // Add other event attributes if needed, e.g.:
  // formData.append('event[name]', 'Summer Music Festival');

  try {
    const response = await fetch(`/api/events/${yourEventId}`, {
      method: 'PATCH',
      headers: {
        // Don't set Content-Type! The browser auto-adds the correct multipart/form-data header with boundary
        Authorization: `Bearer ${yourAuthToken}` // Include if your API uses authentication
      },
      body: formData
    });

    if (!response.ok) throw new Error('Upload failed');
    const data = await response.json();
    console.log('Image uploaded successfully:', data);
  } catch (err) {
    console.error('Upload error:', err);
  }
};

Step 2: Verify Rails Strong Parameters #

Make sure your EventsController is permitting the image parameter correctly. It should look like this:

# app/controllers/events_controller.rb
class EventsController < ApplicationController
  # ... other actions

  def update
    @event = Event.find(params[:id])
    if @event.update(event_params)
      render json: @event
    else
      render json: @event.errors, status: :unprocessable_entity
    end
  end

  private

  def event_params
    # Permit `image` along with any other event attributes you need
    params.require(:event).permit(:image, :name, :description)
  end
end

Step 3: Check for Common Pitfalls #

• Don’t manually set Content-Type: If you force it to application/json or even multipart/form-data, you’ll break the auto-generated boundary the browser adds. Let the browser handle this for you.
• Confirm the file is a valid File object: react-dropzone returns File objects by default, but double-check you’re not accidentally passing a different type.
• Inspect Rails logs: Look at log/development.log to see incoming params. You should see something like:

  Parameters: {"event"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x0000...>}, "id"=>"123"}
  

  If event[image] is missing, your FormData setup is incorrect.
• CarrierWave config: Since ActiveAdmin works, your uploader is likely fine, but double-check it allows your file type (e.g., jpg, png) in the extension_whitelist method.

Why This Works #

By using FormData, you’re mimicking a traditional HTML form submission—this is the format Rails expects for file uploads. The event[image] key matches Rails’ nested parameter structure, so your strong params pick it up correctly, and CarrierWave processes the file just like it does in ActiveAdmin.

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