react-native中使用axios上传文件时formDat

最近遇到一个react-native中使用react-native-image-crop-picker上传图片的问题，纠结了好久。直接上代码：

// react-native App.js
// ...
global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest

function App() {
  // ...
  return (
    // ...
  )
}

// react-native a页面
import ImagePicker from 'react-native-image-crop-picker'
import axios from 'axios'

// ...

const xxxScreen = () => {
  // ...

  const uploadImage = async () => {
    const image = await ImagePicker.openCamera(options) // 或者ImagePicker.openPicker, options省略
    try {
      const data = new FormData()
      data.append('file', {
        uri: image.path,
        type: image.mime,
        name: createFilename(image) // createFilename:获取文件名的封装
      })
      const res = await axios.post('your_upload_url', data)
      console.log(res)
    } catch(error) {
      console.log(error)
    }
  }
}

// node(express) app.js
const fileUpload = require('express-fileupload');
// ...
app.use(
  fileUpload(options) // options省略
);

// node(express) controller.js
module.exports = {
  async upload(req, res, next) {
    console.log(req.files)  // undefined
  }
}

问题是：express中接收文件的接口中req.files始终是undefined

排查过程：

1. 刚开始认为是Content-Type设置问题，应该设置multipart/form-data。结果设置无效，在看过axios源码之后你就会知道，如果上传formData，axios会删除Content-Typeif (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
2. 更换fetch，结果仍然无效
3. 终于在https://github.com/axios/axios/issues/1321中找到了答案，答案就在react-native App.js中global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest注释掉它就能恢复内心的平静

finally, innerpeace...