React Native下axios+redux saga传FormData后端req.file为空如何解决

• FormData追加文件的参数格式错误
  React Native环境下向FormData中追加文件时，不能直接传入文件uri字符串，需要传入包含uri、文件类型、文件名的标准文件对象，后端才能识别为文件字段而非普通字符串字段。
  正确的append写法如下：

  data.append('file', {
    uri: uri,
    type: 'image/jpeg', // 可根据实际文件类型调整，比如png对应image/png
    name: 'avatar.jpg' // 自定义上传后的文件名
  });
  

• 手动设置了错误的Content-Type请求头
  multipart/form-data请求头必须附带随机生成的boundary分隔符参数，后端才能正确拆分表单里的普通字段和文件字段。你手动写死的请求头没有携带boundary参数，会导致后端无法正常识别文件字段，最终把文件内容当成普通表单字段存入req.body。
  直接删除手动设置的headers即可，绝大多数常用请求库（axios、fetch等）检测到请求体为FormData实例时，会自动生成携带正确boundary的multipart/form-data请求头。

修改后的完整代码 #

// react native code
export function* uploadFile({ payload }) {
  const { uri } = payload.data;

  try {
    const data = new FormData();
    data.append('file', {
      uri: uri,
      type: 'image/jpeg',
      name: 'avatar.jpg'
    });
    // 移除手动设置的Content-Type，由请求库自动生成
    const response = yield call(api.post, '/upload', data);
    yield put(fileUploadSuccess(response.data));
  } catch (error) {
    yield put(fileUploadFailure());
  }
}

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