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

Posted 2023-02-21

【中文标题】如何将 CSV 从 React 应用程序发送到 Node.js 服务器？

【英文标题】：How can I send CSV from React app to Node.js server?

【发布时间】：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!');
);

【参考方案1】：

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

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

改为在您的路线中尝试：

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

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