使用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
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。