使用Node.js构建一个React文件上传组件
您可以通过多种不同的方式从React应用程序上传文件进行存储。在本教程中，我们将使用带有Express的Node.js和Multer一个用于处理多部分表单数据的中间件。
在开始之前，您需要安装Node.js，可以按照官方网站上的说明进行操作。
构建React前端
我们将从使用Create React App设置项目开始，并为axios安装基于诺言的HTTP客户端，该客户端可简化API请求。打开一个终端窗口并运行以下命令：
npx create-react-app file-upload
cd file-upload
npm install axios
创建一个名为的新文件FileUpload.js，我们就可以开始使用代码了。
首先导入React，{ useState }因为我们将文件数据存储在状态中，并且axios：
import React, { useState } from "react";
import axios from "axios";
然后添加一个FileUpload()包含简单文件上传表单的函数：
function FileUpload() {
return (
<form onSubmit={uploadFile}>
<input type="file" name="file" onChange={getFile} required />
<input type="submit" name="upload" value="Upload" />
</form>
);
}
export default FileUpload;
接下来，在FileUpload()函数内部，我们将添加onChange事件触发时的功能。我们首先为声明一个变量，fileData然后在调用函数时使用setFileData以下命令保存数据：
const [fileData, setFileData] = useState("");
const getFile = (e) => {
setFileData(e.target.files[0]);
};
FileUpload()通过添加处理onSubmit事件的代码来完成该功能：
const uploadFile = (e) => {
e.preventDefault();
const data = new FormData();
data.append("file", fileData);
axios({
method: "POST",
url: "http://localhost:5000/upload",
data: data,
}).then((res) => {
alert(res.data.message);
});
};
一旦完成，这将把POST数据发送fileData到我们的Node.js端点，http://localhost:5000/upload并通过上载状态提醒响应。
通过将组件加载App.js如下来完成前端：
import React from 'react';
import FileUpload from "./FileUpload";
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<FileUpload />
</header>
</div>
);
}
export default App;
如果运行npm run start命令，则应在浏览器中看到以下内容：
构建Node.js后端
对于后端，我们需要安装以下Node.js依赖项：
npm install express cors multer
express–用于为POST请求创建端点（URI）。cors–允许前端和后端共享资源。multer–用于处理文件上传的中间件。
我们还将安装nodemon为dev依赖项，以监视服务器中的文件更改，因此不需要在每次代码更新时都重新启动：
npm install nodemon --save-dev
接下来创建一个server.js文件，包括依赖关系，并定义应用程序：
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const app = express();
app.use(cors());
所需的唯一配置multer是指定将在其中保存文件的文件夹。在这里，我们将它们保存到/uploads目录中的文件夹中，/public以便前端可以根据需要对其进行访问：
var upload = multer({ dest: "../public/uploads/" });
现在，我们将处理POST请求。
如果文件数据上载文件，否则找不到文件，或者发生服务器错误：
app.post("/upload", upload.single("file"), async (req, res) => {
try {
if (req.file) {
res.send({
status: true,
message: "File Uploaded!",
});
} else {
res.status(400).send({
status: false,
data: "File Not Found :(",
});
}
} catch (err) {
res.status(500).send(err);
}
});
最后，让我们告诉应用程序监听端口5000：
app.listen(5000, () => console.log("Server Running..."));
使用以下命令启动服务器，然后我们可以测试表单：
nodemon server.js
如果文件上传成功，您将获得“文件上传！” 警报消息。您可以通过浏览public/uploads文件夹再次检查上传是否成功。如果上传失败，请检查服务器控制台以获取更多详细信息。
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » 使用Node.js构建一个React文件上传组件
常见问题FAQ
- 没有金币/金币不足 怎么办？
- 本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
- 所有资源普通会员都能下载吗？
- 本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
