React Native如何使用FormData上传图片数组到Laravel服务端？

核心错误 #

你当前的FormData构造逻辑不符合多文件上传的要求：不能直接将整个图片数组追加到images[]字段，必须遍历数组中的每一个文件对象，单个依次追加到FormData实例中。发起请求时不要手动设置Content-Type请求头，框架会自动生成带分隔符的multipart/form-data头，手动设置会导致分隔符丢失，请求解析失败。

其他常见排查项 #

• 网络适配问题
  • 安卓9及以上系统默认禁止明文HTTP请求，若你的服务端接口使用HTTP而非HTTPS，需要在安卓项目AndroidManifest.xml的application节点添加android:usesCleartextTraffic="true"配置，或通过网络安全配置文件放行对应域名
  • 本地调试时如果用安卓模拟器访问宿主机的Laravel服务，不能使用127.0.0.1/localhost，要替换为模拟器专属宿主机映射地址10.0.2.2，iOS模拟器可直接使用localhost
• 权限校验：确认APP已申请存储读取权限，安卓13及以上版本需要额外申请READ_MEDIA_IMAGES权限才能访问本地图片文件
• 跨域配置：Postman不会校验跨域规则，但React Native的请求会校验，确认Laravel端已配置正确的CORS跨域规则，放行前端请求的域名、请求方法和请求头
• 上传限制：确认PHP配置和Laravel的上传大小限制大于你要上传的图片总大小，需要调整php.ini中的upload_max_filesize和post_max_size参数
• 超时设置：大文件上传时建议将请求超时时间调长，避免触发超时中断

修正后的代码示例 #

const formdata = new FormData();
// 遍历图片数组，单个追加文件
this.state.imageArray.forEach(imageItem => {
  formdata.append('images[]', {
    uri: imageItem.uri,
    type: imageItem.type,
    name: imageItem.name
  });
});

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