如何在节点服务器端解析表单数据？答案

【问题标题】：How to parse formdata on node serverside?如何在节点服务器端解析表单数据？
【发布时间】：2017-09-28 02:23:05
【问题描述】：

我正在使用 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: {} }' 日志。

“字段”和“文件”在日志中都是“{}”

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

【问题讨论】：

标签： node.js reactjs axios

【解决方案1】：

使用multer for 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
});

【讨论】：

为什么要直接上传文件，如何在文件上添加验证并创建数据库记录然后上传？

【解决方案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”，但效果很好。我不知道为什么会这样。其他人知道这个原因，请评论这个问题。

【讨论】：

现在您将 {} 删除到 formData 后是否正常工作？