使用Node.js构建一个React文件上传组件

作者 : IT 大叔 本文共2428个字,预计阅读时间需要7分钟 发布时间: 2020-09-30

您可以通过多种不同的方式从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构建一个React文件上传组件插图

构建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

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

发表评论