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

Posted 2023-02-22

【中文标题】React - Axios 正在将未定义的文件数据发送到节点服务器

【英文标题】：React - Axios is sending file data as undefined to a Node server

【发布时间】：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。

我认为你应该传递整个文件对象，而不仅仅是文件名。看看***.com/questions/41878838/…

【参考方案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);