在节点JS表达请求中接收空对象

Question

I have a problem when i upload image from react native to node js server, this is my code

Client

var url = "http://192.168.55.120:3000/uploadimg";
var file = this.state.imgsrc.uri;
const data = new FormData();
data.append('token', 'testName'); 
data.append('photo', {
  uri: file,
  type: 'image/jpeg', 
  name: 'testPhotoName'
});
fetch(url, {
  method: 'post',
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: data
}).then(res => {
  console.log(res)
});

and my server code

const   express         = require('express'),
        bodyParser      = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/uploadimg', function (req, res) {
    console.log(req.body); // =====> empty object       
})

My code is wrong ?

Answer 1

As you can check in body-parser docs , this package doesn't handle multipart form data bodies.

This does not handle multipart bodies, due to their complex and typically large nature. For multipart bodies, you may be interested in the following modules:

 busboy and connect-busboy multiparty and connect-multiparty formidable multer 

Also, you shouldn't need to specify the content type header in fetch ; it'll handle it for you depending on the provided body.

Answer 2

You cannot stringify the formData as mentioned in their docs

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.

If you want to stringify a submitted data, use the pure-AJAX method.

You may consider trying it with util-inspect