React - Axios 正在将未定义的文件数据发送到节点服务器答案

【问题标题】：React - Axios is sending file data as undefined to a Node serverReact - Axios 正在将未定义的文件数据发送到节点服务器
【发布时间】：2019-11-01 12:13:36
【问题描述】：

我正在尝试上传单个文件，并将其存储在我的应用目录中的文件夹中。在前端，我成功地选择了一个文件并将其添加到 Uploader 组件的状态中。当我使用 Axios 向 Node 路由发出 POST 请求时，我在 request body 中变得未定义。

这是组件：

import React, { Component } from 'react';

import axios from 'axios';

export default class SandboxGet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null
    };
  }

  fileSelectHandler = event => {
    const file = event.target.files[0];
    this.setState({ file: file.name });
  };

  fileUploadHandler = () => {
    const data = new FormData();
    data.append('file', this.state.file);
    console.log(data);
    axios
      .post('http://localhost:4000/upload/', this.state.file, {
        // receive two    parameter endpoint url ,form data
      })
      .then(res => {
        // then print response status
        console.log(res.statusText);
      });
  };

  render() {
    return (
      <div className="uploaderContainer">
        <div className="uploadInput">
          <i className="fas fa-upload" />
          <button className="uploadBtn">Select Files</button>
          <input type="file" name="file" onChange={this.fileSelectHandler} />
          <div className="fileName">{this.state.fileName}</div>
        </div>
        <button className="uploadFile" onClick={this.fileUploadHandler}>
          Upload!
        </button>
      </div>
    );
  }
}

这里是节点服务器：

const express = require('express');
const app = express();
const multer = require('multer');
const cors = require('cors');

app.use(cors());

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, '/storage');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage }).single('file');

app.post('/upload', (req, res) => {
  console.log(req.file); // => returns nothing
  console.log(req.body; // => returns nothing
  upload(req, res, function(err) {
    if (err instanceof multer.MulterError) {
      return res.status(500).json(err);
    } else if (err) {
      return res.status(500).json(err);
    }
    return res.status(200).send(req.file);
  });
});

app.listen(4000, function() {
  console.log('App running on port 3000');
});

我觉得我已经接近了，但我错过了一大块拼图。

【问题讨论】：

提示：在使用 axios 并向您的后端发送请求之前，请先查看您的后端是否确实有效。您可以使用 Postman 发送测试请求并确保您的后端正常工作。然后，您可以继续使用 axios。
我认为你应该传递整个文件对象，而不仅仅是文件名。看看stackoverflow.com/questions/41878838/…

标签： javascript node.js reactjs multer

【解决方案1】：

您正在发送this.state.file。您需要发送FormData。

在你的情况下是.post('http://localhost:4000/upload/', data) 另外，您需要发送multipart/form-data 标头。

const headers = {
    'content-type': 'multipart/form-data'
}

那么，

axios.post('http://localhost:4000/upload/', data, {headers});

【讨论】：