Node+Express从零搭建图片上传功能，Node.js入门必备

前端

2023-11-06 05:33:18

Node.js是近年来备受欢迎的JavaScript运行时环境，凭借其高性能、跨平台、易于扩展等特点，在web开发领域备受青睐。Express是Node.js中最受欢迎的web框架之一，以其简单、灵活、功能丰富的特点受到众多开发者的喜爱。

本篇文章将手把手带领大家使用Node.js和Express框架构建一个简单的图片上传功能。我们将从头开始，一步步讲解Node.js的安装、Express框架的使用，以及前端页面设计和图片上传处理。

首先，我们需要安装Node.js。前往Node.js官方网站，选择与您的操作系统对应的安装包，下载并安装。

安装完成后，在命令提示符中输入node -v，如果出现Node.js的版本号，则表示安装成功。

接下来，我们需要安装Express框架。在命令提示符中输入npm install express --save，即可安装Express框架。

安装完成后，我们就可以开始创建我们的Node.js项目了。在命令提示符中输入mkdir图片上传，即可创建一个名为图片上传的文件夹。进入该文件夹，输入npm init -y，初始化项目。

在项目的package.json文件中，添加如下代码：

{
  "name": "图片上传",
  "version": "1.0.0",
  "description": "使用Node.js和Express框架实现图片上传功能",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

接下来，我们创建index.js文件，这是我们的主脚本文件。在index.js文件中，添加如下代码：

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

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.post('/upload', (req, res) => {
  const file = req.files.image;
  file.mv(__dirname + '/public/uploads/' + file.name, (err) => {
    if (err) {
      res.status(500).send('上传失败');
    } else {
      res.status(200).send('上传成功');
    }
  });
});

app.listen(3000, () => {
  console.log('服务器已启动，端口3000');
});

在index.js文件中，我们首先导入Express框架，并创建一个Express实例。然后，我们使用Express的use()方法加载中间件，中间件可以帮助我们处理请求和响应。

接下来，我们定义了两个路由，一个用于处理GET请求，另一个用于处理POST请求。GET请求用于显示上传页面，POST请求用于处理图片上传。

在处理POST请求时，我们使用req.files.image获取上传的图片文件，并将其移动到指定目录。如果移动成功，则返回上传成功的消息，否则返回上传失败的消息。

最后，我们使用app.listen()方法启动服务器，并指定端口为3000。

现在，我们需要创建public文件夹，并在public文件夹中创建index.html文件。index.html文件中，添加如下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>图片上传</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit" value="上传">
  </form>
</body>
</html>