如何将React Native Camera拍摄的图片上传至Laravel后端？

问题概述 #

使用Expo的React Native应用捕获图片后，上传到Laravel后端时频繁出现500或422错误（当前为422），后端验证无法通过。

前端图片数据结构 #

{"base64": null, "height": 820, "uri": "file:///var/mobile/Containers/Data/Application/792E2665-5063-4853-876E-3793568C7FCF/Library/Caches/ExponentExperienceData/%2540anonymous%252Fexpo-app-27783a0c-0a97-44a6-be26-48d37639bb25/ImageManipulator/9FCEF372-7C90-484F-9028-7D4271F9978D.jpg", "width": 476}

前端Axios请求代码 #

const handleSubmit = async() => {
    const formData = new FormData();
    formData.append("photo", {
      uri: photo.uri,
      name: photo.uri.split('/').pop(),
      type: 'image/jpg'
  });
  
    await axios.post("/api/upload", {
        formData
      }, {
        headers: { "Content-Type": "multipart/form-data" },
      }).then(response => {
        console.log(response.data)
      })
}

后端Laravel代码 #

public function store(Request $request)
{
    $validated = $request->validate([
        'photo' => 'required|mimes:jpg,png,jpeg'
    ]);

    return response()->json([
        'status' => 'successfuly executed',
    ]);
}

错误信息 #

Laravel错误日志显示请求内容为：{"formData": null}，但前端请求前打印图片对象是存在的。

解决思路 #

• 修正Axios请求参数格式：当前把formData包裹在对象里传递，导致后端无法解析。直接将formData作为POST请求的第二个参数：

  await axios.post("/api/upload", formData, {
      headers: { "Content-Type": "multipart/form-data" },
  }).then(response => {
      console.log(response.data)
  })
  

• 适配Expo的URI格式：iOS上Expo返回的uri以file://开头，需要去掉该前缀才能被FormData正确识别：

  import { Platform } from 'react-native';
  
  formData.append("photo", {
      uri: Platform.OS === 'ios' ? photo.uri.replace('file://', '') : photo.uri,
      name: photo.uri.split('/').pop(),
      type: 'image/jpeg' // 使用jpeg更符合实际图片类型
  });
  

• 移除手动设置的Content-Type：Axios会自动根据FormData生成包含boundary的正确Content-Type，手动设置会丢失关键的边界信息，导致后端无法解析表单：

  await axios.post("/api/upload", formData)
  

• 后端调试与验证优化：先添加调试代码确认是否接收到文件，再调整验证规则：

  public function store(Request $request)
  {
      // 调试用，查看请求内容
      dd($request->file('photo'), $request->all());
      
      $validated = $request->validate([
          'photo' => 'required|file|mimes:jpg,png,jpeg' // 增加file规则更严谨
      ]);
  
      return response()->json([
          'status' => 'successfully executed',
      ]);
  }
  

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