使用React Native apisauce上传图片到服务器 如何转换为FormData格式

问题根因 #

你原有的实现将所有请求参数、图片地址都拼接在URL查询字符串中，文件上传场景要求请求体采用multipart/form-data编码格式，服务端才能正常解析二进制图片内容，因此原有写法会导致图片上传失败。 #

改造步骤 #

1. 构造FormData请求体 #

所有接口参数、图片资源都统一添加到FormData对象中，React Native环境下上传本地图片需要按照指定格式配置文件字段：

• 本地图片资源的uri、文件类型type、文件名name三个字段缺一不可
• 普通参数直接通过append方法添加即可

2. 修改请求逻辑 #

apisauce底层基于axios封装，传入FormData对象时会自动设置multipart/form-data请求头，无需手动配置，注意不要自行覆盖Content-Type请求头，否则会丢失边界标识导致服务端解析失败。 #

完整代码示例 #

import client from "./client";
import {API_KEY} from "./constant";

const addListing = (postData, locationId, img) => {
  // 初始化FormData对象
  const formData = new FormData();
  
  // 追加普通请求参数
  formData.append('key', API_KEY);
  formData.append('type', 'insert');
  formData.append('object', 'item');
  formData.append('action', 'add');
  formData.append('catId', postData.category);
  formData.append('contactName', '');
  formData.append('contactPhone', postData.mobile);
  formData.append('sPhone', postData.mobile);
  formData.append('showPhone', 1);
  formData.append('contactEmail', `${postData.mobile}@kippee.com`);
  formData.append('price', postData.price);
  formData.append('countryId', 'in');
  formData.append('regionId', '');
  formData.append('cityId', locationId);
  formData.append('title[en_US]', postData.title);
  formData.append('description[en_US]', postData.description);

  // 追加图片文件，img为你从相册/相机获取的本地图片资源，格式示例：{uri: 'file:///xxx/xxx.jpg', type: 'image/jpeg'}
  formData.append('photos', {
    uri: img.uri,
    type: img.type || 'image/jpeg',
    name: img.fileName || `upload_${Date.now()}.jpg`
  });

  // 如果需要上传多张图片，循环append即可，参数名改为photos[]适配数组接收
  // imgList.forEach(item => {
  //   formData.append('photos[]', {
  //     uri: item.uri,
  //     type: item.type || 'image/jpeg',
  //     name: item.fileName || `upload_${Date.now()}.jpg`
  //   })
  // })

  // 发送请求，URL仅保留接口基础路径，所有参数都在FormData请求体中
  return client.post('api.php', formData);
}

注意事项 #

• 如果服务端要求图片数组格式接收多图，追加文件时参数名改为photos[]即可
• iOS环境下本地图片uri如果带file://前缀可以直接使用，无需额外处理
• 确保后端接口已经适配multipart/form-data格式的参数解析，图片字段的接收名称和代码中append的参数名保持一致

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