如何解析节点服务器端的表单数据？

Question

我正在使用 nodejs、REACT、express、axios。我想使上传功能，但我不能。当我上传文件时，服务器无法解析上传的文件（只显示 {} 日志）。

下面是我的前端代码

当用户点击表单元素上的上传按钮时，'handleSubmit'函数被调用，'handleSubmit'调用'fileUploadRequest'函数。

在'fileUploadRequest'函数中，一切正常。我可以看到附件的信息。

<form onSubmit={this.handleSubmit} encType='multipart/form-data'>
                    <input type="file" onChange={this.handleChange}/>
                    <input type="submit" value="UPLOAD"/>
</form>

export function fileUploadRequest(username, uploadFile, uploadFileName) {
    return (dispatch) => {
        dispatch(fileUpload());

        let formData = new FormData();
        formData.append('fileName', uploadFileName);
        formData.append('fileHandler', uploadFile);

        return axios.post('/upload/upload', {formData})
        .then((response) => {
            dispatch(fileUploadSuccess());
        }).catch((error) => {
            dispatch(fileUploadFailure());
        });
    };
}

下面是后端代码。

router.post('/upload', (req, res) => {

    console.log(req.body.);

    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        console.log('parse');
        console.log(fields);
        console.log(files);
    });
});

在 req.body 日志上，我只能看到 '{ formData: {} }' 日志。

'fields' 和 'files' 都是 log

上的“{}”

如何解析服务器上的附件？

Answer 1

使用multer让Express处理上传的文件。然后使用 req.file 访问有关上传文件的所有数据。

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

...

router.post('/upload', upload.single('fileHandler'), (req, res) => {
  console.log('req.file.filename', req.file.filename); // the filename will be generated by multer
  console.log('req.body.fileName', req.body.fileName); // to access the filename you created at the upload
});

Answer 2

@kadiks，谢谢。我可以用 multer 解析上传的文件。

但我发现了更多问题。即使使用 multer，我的代码也无法正常工作。

以下代码无效。

formData = new FormData();
formData.append('fileName', uploadFileName);
return axios.post('/upload/upload', {formData})

所以我像这样更改了我的代码。

formData = new FormData();
formData.append('fileName', uploadFileName);
return axios.post('/upload/upload', formData);

仅将“{formData}”更改为 'formData'，但效果很好。我不知道为什么会这样。其他人知道这个原因，请评论这个问题。

如何解析节点服务器端的表单数据？

How to parse formdata on node serverside?

node.js

reactjs

axios