Question

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

以下是我的前端代码

当用户单击表单元素上的UPLOAD按钮时，调用'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'在日志

上都是'{}'

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

Answer 1

使用Express multer来处理上传的文件。然后使用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);

仅更改＆＃39; {formData}＆＃39; to＆＃39; formData＆＃39;，但这很好用。我不知道为什么会这样。别人知道这个原因，请评论这个问题。

如何在节点服务器端解析formdata？

2 个答案: