使用 React.js, Node.js, Express.js and SQLite DB 来上传配置文件图片

本文将介绍如何使用 React.js, Node.js, Express.js 和 SQLite DB 创建一个 REST API，其中可以上传配置文件图片。这将使你能够通过你的前端应用程序上传和管理配置文件图片。

步骤

以下是创建此应用程序的步骤：

步骤 1：启动 Node 服务

首先，我们需要设置一个 Node 服务来处理文件上传。这将使用以下技术：

• Express.js - 一个基于 Node.js 的 Web 应用程序框架
• Multer.js - 一个用于处理 multipart/form-data 的库

创建一个新项目后，在项目的顶层文件夹中执行以下命令安装 Express 和 Multer：

npm install express --save
npm install multer --save

现在，我们将在项目根目录中创建一个 server.js 文件并将以下代码添加到文件中：

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, `${file.fieldname}-${Date.now()}`);
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ file: req.file });
});

app.listen(5000, () => {
  console.log('Server started on port 5000');
});

这段代码设置了一个用于上传文件的 Express 应用程序。我们使用 Multer 将文件保存到 uploads 文件夹中。

我们创建了一个简单的上传端点，称为 /upload。 端点是一个 POST 请求，并且我们使用 upload.single middleware ，它可以为我们处理上传的文件。在上传完成后，我们还将响应一个 JSON 对象，其中包含上传的文件对象。

步骤 2：创建 React.js 应用程序

创建 React.js 应用程序的过程非常简单。输入以下命令创建一个新 React 应用程序：

npx create-react-app my-app
cd my-app
npm start

这将创建一个新的 React.js 应用程序并启动 webpack 开发服务器。在应用程序中使用的文件将位于 src 目录中。

步骤 3：实现上传文件组件

我们将使用 React.js 来创建一个上传文件组件。每当用户添加一个文件时，它将立即上传。

首先，我们需要安装 axios 库，这将帮助我们发送文件上传请求。在终端中输入以下命令：

npm install axios --save

现在，我们将在 src 目录下创建一个新的 Upload.js 文件，并向其中添加以下代码：

import React, { useState } from 'react';
import axios from 'axios';

const Upload = () => {
  const [file, setFile] = useState('');

  const onChange = e => {
    setFile(e.target.files[0]);
  };

  const onSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);
    await axios.post('http://localhost:5000/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="file" name="file" onChange={onChange} />
        <button type="submit">上传</button>
      </form>
    </div>
  );
};

export default Upload;

这个代码创建了一个简单的表单，允许用户选择一个文件并点击上载按钮。一旦用户提交表单，我们使用 axios 库将文件发送到我们的 Node 服务器。

步骤 4：组装应用程序

现在我们已经有了我们需要的所有代码。在 src 目录下创建一个新的 App.js 文件。在其中添加以下代码：

import React from 'react';
import Upload from './Upload';

const App = () => {
  return (
    <div className='App'>
      <h1>上传文件</h1>
      <Upload />
    </div>
  );
};

export default App;

这将在我们的应用程序中列出 Upload 组件，其中包含我们之前写的上传表单代码。

步骤 5：运行应用程序

运行 npm start 命令来启动应用程序。现在，你可以在 react 应用程序中测试文件上传功能。

结论

现在，你已经成功地使用 React.js, Node.js, Express.js and SQLite DB 来上传和管理配置文件图片。你已经知道如何使用 Multer 来处理文件上传请求，以及如何在 React 应用程序中使用 axios 库来向服务器发送文件。