Ajax 配合node js multer 实现文件上传功能

下面我来详细讲解一下“Ajax 配合node js multer 实现文件上传功能”的完整攻略。

一、前置知识

在学习如何使用 Ajax 配合 node js multer 实现文件上传功能之前，需要掌握以下前置知识：

1. HTML5 的 File API：该 API 可以让我们读取本地文件，并将其转换成二进制数据或 Data URL，从而实现文件上传。
2. Node.js 的 multer 模块：该模块可以处理 HTTP POST 请求中的文件数据，并将其保存在本地服务器上。

二、实现步骤

下面是具体的实现步骤：

1. HTML 页面

首先，在 HTML 页面中添加一个表单，其中包含一个文件输入框和一个上传按钮，如下所示：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="myFile" id="fileInput">
  <button type="submit" id="uploadButton">上传</button>
</form>

注意，在 form 标签中需要添加 enctype="multipart/form-data" 属性，以确保表单支持上传文件。

2. Ajax 请求

接下来，我们需要使用 Ajax 发送表单数据。在 jQuery 中，可以使用 $.ajax() 方法来实现：

$(document).ready(function() {
  $('#uploadForm').submit(function(event) {
    event.preventDefault();

    var formData = new FormData($(this)[0]);
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        alert(response);
      }
    });
  });
});

以上代码中，我们首先阻止了表单默认的提交行为，然后使用 FormData 对象将表单数据封装为一个数据集合。接着，使用 $.ajax() 方法将数据提交给 node.js 服务器的 /upload 路径，并设置 processData 和 contentType 为 false，以确保可以上传文件。最后，在请求成功后，我们可以弹出一个提示框来显示上传结果。

3. Node.js 服务器

在 node.js 服务器端，需要使用 multer 模块来处理文件上传。我们可以先创建一个 Express 应用程序，然后在其中引入 multer，如下所示：

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

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

const upload = multer({ storage: storage });

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

app.post('/upload', upload.single('myFile'), function(req, res) {
  console.log(req.file);
  res.send('上传成功！');
});

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

以上代码中，我们首先创建了一个 multer 实例，并将其配置为将上传的文件保存在 uploads/ 目录下，文件名为原始字段名和当前时间戳的组合。然后，我们创建一个路由函数来处理 /upload 路径的 POST 请求，并使用 upload.single() 方法来处理单文件上传。在路由函数中，我们可以使用 req.file 来访问上传的文件对象，然后返回一个字符串表示上传成功。

4. 展示上传结果

最后，我们需要在客户端展示上传结果。根据之前的代码，我们可以添加一个成功后的提示框来展示上传结果，如下所示：

success: function(response) {
  alert(response);
}

当上传成功后，会弹出一个提示框，显示上传结果。

三、示例说明

下面，我将给出两个示例，帮助大家更好地理解 Ajax 配合 node js multer 实现文件上传功能的过程。

示例一

假设我们要在一个在线图库网站上添加上传图片的功能。我们可以创建一个 HTML 页面，其中包含一个表单和上传按钮，如下所示：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="myFile" id="fileInput">
  <button type="submit" id="uploadButton">上传</button>
</form>

然后，在客户端 JavaScript 中，我们可以使用 Ajax 发送表单数据，如下所示：

$(document).ready(function() {
  $('#uploadForm').submit(function(event) {
    event.preventDefault();

    var formData = new FormData($(this)[0]);
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        alert(response);
      }
    });
  });
});

最后，在 node.js 服务器中，我们需要使用 multer 处理文件上传，如下所示：

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

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

const upload = multer({ storage: storage });

app.post('/upload', upload.single('myFile'), function(req, res) {
  console.log(req.file);
  res.send('上传成功！');
});

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

示例二

假设我们要在一个在线文档编辑器中添加上传文档的功能。我们可以创建一个 HTML 页面，其中包含一个表单和上传按钮，如下所示：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="myFile" id="fileInput">
  <button type="submit" id="uploadButton">上传</button>
</form>

然后，在客户端 JavaScript 中，我们可以使用 Ajax 发送表单数据，如下所示：

$(document).ready(function() {
  $('#uploadForm').submit(function(event) {
    event.preventDefault();

    var formData = new FormData($(this)[0]);
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        alert(response);
      }
    });
  });
});

最后，在 node.js 服务器中，我们需要使用 multer 处理文件上传，如下所示：

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

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

const upload = multer({ storage: storage });

app.post('/upload', upload.single('myFile'), function(req, res) {
  console.log(req.file);
  res.send('上传成功！');
});

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

以上就是我的回答，如果还有不明白的地方，欢迎再问。