如何将 CSV 从 React 应用程序发送到 Node.js 服务器？答案

【问题标题】：How can I send CSV from React app to Node.js server?如何将 CSV 从 React 应用程序发送到 Node.js 服务器？
【发布时间】：2022-01-02 00:42:54
【问题描述】：

在我的 React 应用程序中，我有一个 type="file" 的输入。我想在此输入中上传我的 CSV 文件并将其发送到我的 Node.js 服务器，但它不起作用。此外，还有一个问题是我的服务器只提供 6 个 uotput，然后什么也没有。我是 js 和 React 的新手，所以请详细回答；）

我的 App.js：

import './App.css';
import React, { useState, useEffect } from "react";
import axios from 'axios'

function App() {
  const [csvFile, SetCsvFile] = useState();
  return (
    <div className="App">
      <header className="App-header">
        <div>
          Select file
          <input type="file" name="file" onChange={e => {
            SetCsvFile(e.target.files)
            const formData = new FormData();
            formData.append('name', "FILENAME");
            formData.append('file', csvFile);
            const url = 'http://localhost:8080/EXPRESSENDPOINT';
            axios({
              method: 'POST',
              url: url,
              headers: {
                ContentType: 'multipart/form-data'
              },
              body: formData
            })
              .then(res => console.log(res))
              .catch(err => console.log(err));
          }} />
        </div>
      </header>
    </div>
  );
}
export default App;

我的 server.js

var express = require('express');
var app = express();

const bodyParser = require("body-parser");
const CsvUpload = require("express-fileupload");

app.use(CsvUpload());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/EXPRESSENDPOINT',
    (req, res, next) => { console.log(req.body)});

app.listen(8080, () => {
    console.log('Application listening on port 8080!');
});

【问题讨论】：

标签： javascript node.js reactjs express sockets

【解决方案1】：

我发现你的服务器有两个问题：

您的端点未返回响应，导致请求挂起
您在错误的位置检查文件。 see usage instructions of that package

改为在您的路线中尝试：

app.use('/upload', (req, res, next) => {
    console.log(req.files)
    res.sendStatus(200)
});

注意：最好从 Node 发布日志。

【讨论】：