Question

我正在尝试上传一个文件，并将其存储在我的应用目录中的文件夹中。在前端，我成功选择了一个文件并将其添加到Uploader组件的状态。当我使用Axios向节点路由发出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');
});

我觉得自己越来越近了，但是我却错过了一大难题。

Answer 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});

反应-Axios将未定义的文件数据发送到节点服务器

1 个答案: