React-Native上传图片到服务端时如何在FormData中添加avt、email两个参数

前置准备 #

提前获取到待上传的头像资源信息（可通过 react-native-image-picker、expo-image-picker 等选图库实现），选图成功后会得到包含图片 uri、type、fileName 字段的资源对象，同时准备好需要传入的用户邮箱参数。

核心实现代码 #

1. 构造FormData实例 #

const formData = new FormData();
// 追加邮箱参数
formData.append('email', 'xxx@example.com');
// 追加头像文件参数，imageAsset为选图后拿到的单个图片资源对象
formData.append('avt', {
  uri: imageAsset.uri,
  type: imageAsset.type || 'image/jpeg',
  name: imageAsset.fileName || 'avatar.jpg'
});

2. 发起上传请求 #

基于fetch的实现

fetch('你的服务端上传接口地址', {
  method: 'POST',
  body: formData,
  headers: {
    // 按需添加其他请求头，比如鉴权token
    'Authorization': 'Bearer 你的用户鉴权令牌'
    // 注意：不要手动添加 Content-Type: multipart/form-data 头，RN会自动生成带boundary的正确头信息
  }
})
.then(res => res.json())
.then(res => {
  console.log('上传成功', res);
})
.catch(err => {
  console.error('上传失败', err);
})

基于axios的实现

import axios from 'axios';

axios.post('你的服务端上传接口地址', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
    'Authorization': 'Bearer 你的用户鉴权令牌'
  }
})
.then(res => {
  console.log('上传成功', res.data);
})
.catch(err => {
  console.error('上传失败', err);
})

常见问题排查 #

• 安卓平台下content://开头的本地文件uri可以直接传入，不需要额外转换为file://格式
• 若服务端解析不到文件参数，优先检查上传的文件对象是否完整传入了uri、type、name三个字段
• 用fetch请求时手动设置multipart/form-data头会导致boundary参数缺失，引发服务端解析失败，直接去掉手动设置的该头即可

内容的提问来源于stack exchange，提问作者Chen Triều