React Native IOS 应用无法通过 Express + multer 服务器上传图像

Question

React Native IOS 应用程序，想要从设备上传图片。RN版本为0.39.2

客户端：

const formData = new FormData()
formData.append('files', file)
formData.append('type', 'image')

fetch(API_HOST+UPLOAD_AVATAR,{
    method:'post',
    headers: {'Content-Type':'multipart/form-data;boundary=6ff46e0b6b5148d984f148b6542e5a5d','Authorization': 'Bearer'+' '+token},
    body: formData
 })
 .then(response=>response.json())
 .then(data=>{
                      //console.log(data)
                      //Alert.alert(data)
  })
  .catch(error=>{
      console.log(error)
  })

服务器：

var multer = require('multer');
var upload = multer();
router.post('/user', ensureAuthenticated, upload.any(), function (req, res) {

    console.log(req.body);
    console.log(req.files);
})

错误：

服务器请求体（req.body）和文件（req.files）为空。

然后我尝试使用RNFetchBlob。

     RNFetchBlob.fetch('POST', API_HOST+UPLOAD_AVATAR, {
           'Content-Type':'multipart/form-data;boundary=6ff46e0b6b5148d984f148b6542e5a5d'
           'Authorization' : 'Bearer'+' '+token
     }, formData)
     .then((resp) => {

     }).catch((err) => {
         // ...
     })

然后错误变为

NSMutableDictionary 无法转换为 NSString。

而 req.body 是 {}，req.files 是未定义的

- Hao Chen

Answer 1

我假设你已经找到了解决方案，如果是的话，能否分享一下呢？ 无论如何，对于RNFetchBlob问题，我曾经遇到过相同的错误，通过将FormData更改为数组来解决。像这样：

const body = [{
  name: 'data',
  data: JSON.stringify(whateverData)
}, {
  name: 'file',
  data: filePath,
}]; 

…

RNFetchBlob.fetch('POST', apiEndpoint, headers, body);

希望这有所帮助。

- juangv