如何修复 React + Node 中的上传文件？

Question

我尝试将文件上传到服务器，但收到错误 500。

在前端（React）我使用 axios：

class InputFile extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedFile: null };
    this.handleUploadFile = this.handleUploadFile.bind(this);
    this.handleUpload = this.handleUpload.bind(this);
  }

  handleUploadFile(event) {
    this.setState({
      selectedFile: event.target.files[0]
    });
  }

  handleUpload() {
    const data = new FormData();

    data.append('file', this.state.selectedFile, this.state.selectedFile.name);
    axios
        .post('http://127.0.0.1:8000/upload', data)
        .then(res => {
          console.log(res.statusText);
        });
  }

  render() {
    return (
      <div>
        <input name='file' type='file' formEncType='multipart/form-data'
          onChange={this.handleUploadFile} multiple
        />
      </div>
      )
     }
    }

在后端（节点）我试图将文件保存在文件夹中：

app.route('/upload')
    .post((req, res, next) => {
      const uploadFile = req.files.file;
      const fileName = req.files.file.name;

      uploadFile.mv(
          `uploadFiles/${fileName}`,
          (err) => {
            if (err) {
              return res.status(500).send(err);
            }

            res.json({
              file: `uploadFiles/${req.files.file.name}`
            });
          },
        );
    });

实际上我在控制台中收到错误：

未捕获（承诺中）错误：请求失败，状态码为 500

而后端的 req.files 是 undefined。我该如何解决？应该可以一次上传一个或多个文件

在前端我使用：“axios”：“^0.18.0”，

在后端我使用：“express-fileupload”：“^1.0.0”

Answer 1

问题在于后端的目录路径。我改变了这个：

`uploadFiles/${fileName}`,

到我计算机上的完整路径：

/var/*/uploadFiles/${fileName},

我也忘了添加这个：

const fileUpload = require('express-fileupload');

app.use(fileUpload());