Nodejs教程-Express.js 文件上传

作者: 鱼丸

时间: 2023-08-31

分类: Nodejs教程

在 Express.js 中，由于其异步性质和网络处理方式，文件上传相对复杂一些。

我们可以通过使用中间件来处理多部分/form数据来实现文件上传。有许多可用的中间件，比如 multer、connect、body-parser 等。

下面通过一个示例来演示在 Node.js 中如何进行文件上传。在这里，我们将使用 'multer' 中间件。

首先创建一个名为 "jtp file upload" 的文件夹，并在其中包含以下文件：

uploads： 这是一个空文件夹，用于存储上传的图像。

package.json： 这是一个 JSON 文件，包含以下数据：

文件：package.json

{
  "name": "file_upload",
  "version": "0.0.1",
  "dependencies": {
    "express": "4.13.3",
    "multer": "1.1.0"
  },
  "devDependencies": {
    "should": "~7.1.0",
    "mocha": "~2.3.3",
    "supertest": "~1.1.0"
  }
}

文件：index.html

<!DOCTYPE html>
<html>
<head>
  <title>Node.js 文件上传</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#uploadForm').submit(function() {
        $("#status").empty().text("文件正在上传中...");

        $(this).ajaxSubmit({
          error: function(xhr) {
            status('错误：' + xhr.status);
          },
          success: function(response) {
            console.log(response)
            $("#status").empty().text(response);
          }
        });

        return false;
      });   
    });
  </script>
</head>
<body>
  <h1>Express.js 文件上传</h1>
  <form id="uploadForm" enctype="multipart/form-data" action="/uploadjavatiku" method="post">
    <input type="file" name="myfile"/><br/><br/>
    <input type="submit" value="上传图像" name="submit"/><br/><br/>
    <span id="status"></span>
  </form>
</body>
</html>

文件：server.js

var express = require("express");
var multer = require('multer');
var app = express();

var storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});

var upload = multer({ storage: storage }).single('myfile');

app.get('/', function (req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.post('/uploadjavatiku', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.end("上传文件出错。");
    }
    res.end("文件上传成功！");
  });
});

app.listen(2000, function () {
  console.log("服务器正在运行，端口号为 2000");
});

要安装 package.json，执行以下命令：

npm install

这将在 "jtp file upload" 文件夹中创建一个名为 "node_modules" 的新文件夹。

依赖项已安装好。现在，运行服务器：

node server.js

在浏览器中打开 http://127.0.0.1:2000/，即可上传图像。

选择要上传的图像，然后点击 "上传图像" 按钮。

文件上传成功后，您可以在 "Uploads" 文件夹中找到已上传的文件。

Nodejs教程-Express.js 文件上传

推荐文章

其它