Ajax异步文件上传与NodeJS express服务端处理

一、介绍
本文将讲解如何使用Ajax异步上传文件并在NodeJS的express服务端进行处理。本文将分为以下步骤：
1. 简单介绍Ajax异步上传文件的原理；
2. 编写客户端的HTML、CSS、JavaScript代码实现文件上传功能；
3. 编写服务端的NodeJS express代码实现文件上传后的处理；
4. 给出两个实例供读者参考。

二、原理
Ajax异步上传文件的原理是使用XMLHttpRequest对象发送一个POST请求，请求体中携带FormData对象，将文件加入到请求中。在客户端进行上传操作后，服务端根据FormData中的文件数据来进行上传操作。

三、客户端实现
1. HTML代码：

<body>
  <h1>文件上传</h1>
  <input type="file" id="upload" name="upload">
  <button onclick="uploadFile()">上传</button>
  <div id="msg"></div>
</body>

CSS代码：

body { padding: 20px; }
h1, input, button { display: block; margin: 10px 0; }

JavaScript代码：

function uploadFile() {
  let file = document.getElementById("upload").files[0];
  let formData = new FormData();
  formData.append("upload", file);
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("msg").innerText = "上传成功";
    } else if (xhr.readyState == 4 && xhr.status != 200) {
      document.getElementById("msg").innerText = "上传失败";
    }
  }
  xhr.open("POST", "/upload", true);
  xhr.send(formData);
}

通过上传按钮的点击，调用uploadFile函数，获取file对象，使用FormData对象包装form数据，然后通过XMLHttpRequest对象异步上传。

四、服务端实现
1. 安装multer模块，Multer是一个NodeJS中上传文件的中间件，方便我们处理上传的文件。

npm install multer --save

NodeJS express代码：

const express = require("express");
const multer = require("multer");
const fs = require("fs")
const app = express();
const upload = multer({ dest: "./uploads" });

app.post("/upload", upload.single("upload"), function(req, res) {
  let file = req.file;
  fs.renameSync(file.path, file.destination + "/" + file.originalname);
  res.status(200).end();
});

const server = app.listen(8080, function() {
  console.log("Server running at http://localhost:" + server.address().port);
});

通过multer中间件来处理上传的文件，将文件保存到指定目录下，并重命名为原始文件名。

五、示例
1. 上传图片并返回图片宽高信息

app.post("/upload/image", upload.single("image"), function(req, res) {
  let file = req.file;
  let data = {
    width: 0,
    height: 0
  };
  let buffer = fs.readFileSync(file.path);
  require("sharp")(buffer).metadata().then(function(metadata) {
    data.width = metadata.width;
    data.height = metadata.height;
    res.status(200).send(JSON.stringify(data)).end();
  });
});

需要安装sharp模块。
2. 将上传的文件复制到指定目录下

app.post("/upload/copy", upload.single("copy"), function(req, res) {
  let file = req.file;
  let dstPath = "/path/to/destination";
  fs.createReadStream(file.path).pipe(fs.createWriteStream(dstPath + "/" + file.originalname));
  res.status(200).end();
});

直接使用fs模块将文件复制到指定目录下。

六、总结
通过本文，我们可以实现使用Ajax异步上传文件并在NodeJS的express服务端进行处理。根据需要，可以灵活地处理上传文件后的操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax异步文件上传与NodeJS express服务端处理 - Python技术站

Ajax异步文件上传与NodeJS express服务端处理

相关文章