用 AJAX 优化前端文件上传

2023-12-23 15:39:15

用 AJAX 简化前端文件上传

引言

在当今 Web 开发的世界中，AJAX（异步 JavaScript 和 XML）是一种必不可少的技术，它允许我们创建动态且交互式的 Web 应用程序。借助 AJAX，我们可以与服务器通信，而无需刷新整个页面，从而提升用户体验并提高应用程序性能。

封装 AJAX

封装 AJAX 的目的是创建一个通用的函数或对象，它可以在应用程序中重复使用，用于处理与服务器的通信。这可以简化开发过程并提高代码的可维护性。

以下是一个简单的 AJAX 封装示例：

function ajax(options) {
  const request = new XMLHttpRequest();
  request.open(options.method, options.url, true);
  request.setRequestHeader("Content-Type", "application/json");
  request.onload = function () {
    if (request.status >= 200 && request.status < 400) {
      options.success(JSON.parse(request.responseText));
    } else {
      options.error(request.responseText);
    }
  };
  request.onerror = function () {
    options.error(request.responseText);
  };
  request.send(JSON.stringify(options.data));
}

使用 AJAX 上传图片

利用我们封装的 AJAX 函数，我们可以轻松实现前端文件上传。

const form = document.getElementById("form");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const data = new FormData(form);
  const imageFile = data.get("image");

  ajax({
    url: "/upload",
    method: "POST",
    data: data,
    success: (response) => {
      // 处理成功响应
    },
    error: (error) => {
      // 处理错误响应
    },
  });
});

在这个示例中，我们使用 FormData 对象来构建包含图像文件和任何其他必要数据的请求数据。然后，我们调用 AJAX 函数来与服务器通信并上传文件。

在 Node.js 中接收上传的文件

在服务器端（例如 Node.js），我们可以使用 Express.js 框架来接收上传的文件。

const express = require("express");

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

app.post("/upload", (req, res) => {
  const imageFile = req.files.image;
  // 保存图像文件并处理上传
  res.sendStatus(200);
});

app.listen(3000);