Question

无论我如何实现文件上传，我都会在Express中检查请求的undefined属性时返回req.file。

...

反应代码

组件：

import Files from 'react-files';

<form encType="multipart/formdata">
     <Files
        ref='files'
        onChange={this.onFileUpload}>
     </Files>
</form>

方法：

onFileUpload (files) {

    let reader = new FileReader();

    reader.onload = upload => {
        this.setState({
            dataURI: upload.target.result
        }, () => {

            if (typeof appState.balance == 'number' && appState.balance > 0) {
                appState.onFileAdd(files, this.state.dataURI);

            } else {
                this.setState({ modal: true });
            }

        });
    }

    reader.readAsDataURL(files[files.length - 1]);
}

这是正常的;状态中的dataURI值是合法的并且设置正确。

...

API致电代码

export async function funFile(name, dataURI) {
   let data = new FormData();

   data.append('file', dataURI);
   data.append('name', name);

   return await fetch('http://localhost:1185/fun',
    { method: 'POST', data }).then(res => {
        if (res.ok && res.status == 200) {
            return res.json();
        } else {
            return null;
        }
    });
}

在此处检查data会返回预期的FormData对象，但无法查看分配的name和file属性（这是否是因为它们未正确分配或者这是我不确定的预期行为。

...

快递代码

var multer = require('multer');
var upload = multer({ destination: 'uploads/' });

app.post('/fun', upload.single('file'), (req, res) => {

   console.log('file', req.file);
   console.log('files', req.files);

   // both of these return undefined
});

无论我此时做什么，请求都不会返回文件数据。 req.body属性也是空的。

我不确定这里出现了什么问题，并且从这个实现的所有可能的教程和演练中我已经尝试了所有可能的语法排列，所以任何帮助都会受到赞赏！

Answer 1

我认为问题在于将文件作为数据url读取。忘掉FileReader。您不需要阅读任何内容，只需将文件对象传递给FormData，就可以全部设置。

<强>的onChange

onFileUpload (files) {

  this.setState({
    file: files[files.length-1]
  }, () => {

    if (typeof appState.balance == 'number' && appState.balance > 0) {
      appState.onFileAdd(files, this.state.file);
    } else {
      this.setState({ modal: true });
    }

  });
}

API致电

export async function funFile(name, file) {
   let data = new FormData();

   data.append(name, file); // name here should be avatar

   return await fetch('http://localhost:1185/fun',
    { method: 'POST', data }).then(res => {
        if (res.ok && res.status == 200) {
            return res.json();
        } else {
            return null;
        }
    });
}

Multer使用ReactJS返回文件上传的“undefined”

1 个答案: