React Native使用react-native-image-crop-picker上传图片返回data:null如何解决

问题原因 #

• 你当前用普通JSON格式提交图片数据，后端无法识别二进制文件内容：图片属于二进制文件，不能直接放在JSON请求体里上传，必须使用multipart/form-data格式的请求，通过FormData对象封装文件参数。
• 你构造的image对象缺少后端接收文件必须的name字段，多数服务端解析上传文件时要求携带该参数。
• 未显式配置post请求的Content-Type为multipart/form-data，服务端无法正确解析请求内容。

修复方案 #

1. 导入依赖 #

用到系统判断时需要先导入Platform模块：

import { Platform } from 'react-native'

2. 修改上传请求逻辑，改用FormData封装参数 #

把doTambah方法里的请求构造逻辑替换为FormData写法，注意给图片参数补全必填字段，安卓端需要额外把uri开头的file://前缀去掉：

doTambah = async () => {
  const { image } = this.state;
  // 构造FormData对象
  const formData = new FormData();
  // 追加其他普通参数，替换为你实际需要提交的字段即可
  // formData.append('nama_produk', this.state.namaProduk);
  // formData.append('harga', this.state.harga);

  // 处理图片参数
  if (image) {
    // 处理安卓端uri前缀问题
    const fileUri = Platform.OS === 'android' ? image.uri.replace('file://', '') : image.uri;
    formData.append('foto', {
      uri: fileUri,
      type: image.type,
      name: 'upload.jpg', // 可自定义文件名，也可以用时间戳生成唯一名称
      size: image.size
    });
  }

  api.post('/tambah_produk', formData, {
    // 配置请求头
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  })
  .then(res => {
    alert('data berhasil disimpan');
  })
  .catch(err => {
    alert(err);
    console.log(err);
  });
}

3. 额外兼容检查 #

• 确认后端接收文件的字段名确实为foto，如果字段名不一致也会导致后端解析不到数据返回null。
• 如果使用axios作为请求库，部分版本需要额外添加transformRequest配置避免axios自动把FormData转为JSON：

// 在请求配置中增加该字段
transformRequest: (data, headers) => {
  return data;
}

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