React-Native中Multipart/form-data文件上传失败问题排查

我之前也碰到过类似的坑，核心问题就是手动设置请求头破坏了FormData的自动边界（boundary）生成，导致Rails没法正确解析multipart格式的参数。下面一步步给你梳理解决方案：

一、问题根源拆解 #

你之前的两种请求头设置都会出问题：

• 设为application/json：FormData本身是multipart格式，和JSON结构不兼容，后端自然解析不了参数；
• 手动设为multipart/form-data：FormData需要自动生成带boundary的完整请求头（比如multipart/form-data; boundary=----WebKitFormBoundaryxxx），手动写死的话会丢失这个关键的boundary，Rails不知道怎么分割各个参数，导致解析混乱。

另外你代码里加的Content-Disposition: form-data完全多余，不需要手动设置。

二、客户端代码修复 #

修改apisauce的配置，移除手动设置的Content-Type和Content-Disposition，让FormData自动生成正确的请求头。同时优化一些细节逻辑：

import React, { useState } from "react"
import ImagePicker from "react-native-image-crop-picker"
import FormData from "form-data"
import { create } from "apisauce"
import { Platform, Button, Text } from "react-native"

const EditProfile = props => {
  const [progress, setProgress] = useState(0)
  // 假设user、authHeaders、baseURL是已传入的变量
  const { user, authHeaders, baseURL } = props

  const pickImage = () => {
    ImagePicker.openPicker({ 
      width: 200, 
      height: 200,
      cropping: true // 按需开启裁剪
    }).then(image => {
      const form = new FormData()
      form.append("photoable_type", "User")
      form.append("photoable_id", user.id)
      form.append("photo_name", image.filename)
      // 兼容iOS和Android的uri格式
      form.append("photo", {
        name: image.filename,
        uri: Platform.OS === "ios" ? image.path.replace("file://", "") : image.path,
        contentType: image.mime,
      })
      // 如果要上传用户头像，直接追加到form里即可
      // form.append("user_logo", {
      //   name: "user-logo.png",
      //   uri: user.logoPath,
      //   contentType: "image/png"
      // })

      const api = create({
        baseURL: baseURL,
        headers: {
          ...authHeaders,
          Accept: "application/json",
          // 这里不要手动设置Content-Type！让FormData自动处理
        },
      })

      api.post("/photos", form, {
        onUploadProgress: e => {
          if (e.total > 0) {
            const currentProgress = e.loaded / e.total
            setProgress(currentProgress)
            console.log("上传进度：", currentProgress)
          }
        },
      })
      .then(res => {
        console.log("上传成功返回：", res.data)
      })
      .catch(e => {
        console.log("上传失败：", e.message || e)
      })
    })
    .catch(pickerError => {
      console.log("图片选择/裁剪失败：", pickerError)
    })
  }

  return <Button onPress={pickImage}><Text>Add Photo</Text></Button>
}

export default EditProfile

关键修改点： #

1. 移除了手动设置的Content-Type和Content-Disposition，apisauce会自动根据FormData生成带boundary的正确请求头；
2. 兼容iOS的uri格式：react-native-image-crop-picker返回的iOS路径带file://前缀，部分场景下FormData解析会出错，所以去掉前缀；
3. 优化进度更新逻辑，避免直接修改state变量，直接调用setProgress；
4. 增加了图片选择环节的错误捕获，避免崩溃。

三、后端Rails的确认点 #

你的photo_params写法是对的，可以再确认两个细节：

1. 确保/photos路由允许POST请求；
2. 检查Rails的中间件配置，默认ActionDispatch::Http::Parameters已经能正确处理multipart请求，不需要额外配置。如果还是有问题，可以在控制器里打印参数排查：

def create
  puts "接收到的原始参数：#{params.inspect}"
  # 后续逻辑
end

这样能快速定位是客户端参数没传对，还是后端解析的问题。

四、额外注意事项 #

• 确保authHeaders里没有覆盖Content-Type，比如不要在authHeaders里设置Content-Type: application/json；
• 如果要同时上传用户头像，直接用form.append("user_logo", { ... })的方式添加即可，格式和photo一致；
• 测试时可以用Postman模拟multipart请求，先确认后端能正确接收参数，再排查客户端问题。

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