基于nodejs+express(4.x+)实现文件上传功能

实现文件上传功能是Web开发中常见的需求之一。本文档将详细讲解如何使用nodejs+express(4.x+)实现文件上传功能。

1. 安装express(4.x+)和multer

在开始使用express和multer之前，需要先确保它们已经安装在你的电脑上。

可以通过npm来进行安装:

npm install express multer --save

2. 添加文件上传路由

在Express应用程序中，我们需要添加一个处理文件上传请求的路由。这个路由将处理从客户端发送过来的文件上传请求，并将文件保存到我们指定的文件夹中。

示例代码如下:

const express = require('express');
const router = express.Router();
const multer = require('multer');

// 上传文件至指定文件夹，重命名为原始文件名
const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads/');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});

const upload = multer({ storage });

// 处理文件上传请求
router.post('/upload', upload.single('file'), (req, res) => {
  res.send('上传成功！');
});

module.exports = router;

代码中定义了一个处理文件上传请求的路由，路由的路径为'/upload'。

在路由中，我们使用multer来创建一个上传存储对象storage，并使用该存储对象创建一个multer中间件upload。最后使用路由中的回调函数处理文件上传请求，中间件upload.single('file') 将文件存储至指定文件夹中并重命名为原始文件名。

此处的'file'指的是客户端上传文件的字段名。在实际代码中，应该根据客户端的实际情况修改参数。

3. 添加前端页面及相关代码

添加一个表单用来上传文件，并在表单中设置上传文件字段的名称。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>File Upload Form</title>
</head>
<body>
  <h3>上传文件</h3>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
  </form>
</body>
</html>

4. 运行和测试文件上传功能

将以上代码保存在合适的位置并启动应用程序。在浏览器中访问上传表单页面，选择一个文件并提交，应该会出现上传成功提示。

示例代码如下:

const express = require('express');
const app = express();
const fileUpload = require('./routes/fileUpload');

app.use(express.static('public'));

app.use('/', fileUpload);

const server = app.listen(3000, function() {
    console.log('Server listening on port ' + server.address().port);
});

5. 实际应用：上传图片并展示

下面实现一个实际应用场景，上传一张图片并展示它。

1、将图片存储到服务器上指定的目录中

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

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './public/img');
    },
    filename: function(req, file, cb) {
        cb(null, `${Date.now()}-${file.originalname}`);
    }
});

const upload = multer({ storage });

app.post('/uploadImg', upload.single('image'), (req, res) => {
  res.send('上传成功！');
});

app.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

在上述代码中，实现将图片保存到服务器指定目录中的功能。storage中的destination属性定义了图片存储的目录，filename属性定义了如何给图片文件命名。

2、前端界面上传图片

前端界面可以使用HTML的form表单和input[type=file]元素实现文件上传，并使用XMLHttpRequest对象来提交文件到服务器上。

代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*"/>
        <input type="button" value="上传" onclick="submitImg()"/>
    </form>

    <script>
      function submitImg() {
        var fd = new FormData();
        fd.append('image', document.getElementsByName('image')[0].files[0]);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
          }
        };

        xhr.open('POST', '/uploadImg', true);
        xhr.send(fd);
      }
    </script>
</body>
</html>

在以上代码中，我们使用FormData对象封装待上传的数据。FormData对象可以从一个form元素实例化，也可以直接使用其构造函数。

3、前端显示上传图片

前端界面可以通过image元素来显示上传的图片。

代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>展示图片</title>
</head>
<body>
    <h2>上传的图片：</h2>
    <img src="http://localhost:3000/img/test.jpg" alt="no image"/>
</body>
</html>

在以上示例代码中，用img元素来呈现上传的图片，src属性指向在服务器上保存的图片文件路径。

总结

使用nodejs+express(4.x+)实现文件上传功能的攻略：

安装express和multer模块
添加文件上传路由，使用multer处理文件上传请求
添加前端页面，设置上传文件字段的名称
运行和测试文件上传功能
实际应用：上传图片并展示

上述功能只是文件上传功能的基础，可以根据具体需求进行扩展和优化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于nodejs+express(4.x+)实现文件上传功能 - Python技术站

基于nodejs+express(4.x+)实现文件上传功能

1. 安装express(4.x+)和multer

2. 添加文件上传路由

3. 添加前端页面及相关代码

4. 运行和测试文件上传功能

5. 实际应用：上传图片并展示

总结

相关文章