我想将CSV文件从React.js应用程序发送到Node.js服务器.然后在服务器上使用CSV

Question

我不知道如何连接React应用程序和Node.js服务器。在我的React应用程序中，我有一个类型为"的输入；文件"；在那里我上传了我的CSV文件，然后我按下按钮将这个文件发送到Node.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!');
});

我的应用程序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;

Answer 1

您的反应代码是

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

nodejs后端是

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

将逻辑提取到函数中

handleler = (e) => {
SetCsvFile(e.target.files[0])
}
<input type="file" name="file" onChange={handleler} />

或者简单地这样做，

onChange={e => {
SetCsvFile(e.target.files)
}}