高效实现文件上传：前端与后端完美配合

前端

2023-08-12 06:20:00

如何使用 FormData 和 XHR 在前端实现文件上传

文件上传是网站中不可或缺的功能，它能够帮助用户轻松上传图片、文档、视频等各种文件。在本文中，我们将深入探讨如何使用 FormData 和 XHR（XMLHttpRequest）在前端实现文件上传，并结合 Koa 后端实现文件存储和处理。

什么是 FormData 和 XHR？

FormData： 一个 JavaScript API，用于创建包含文件数据的对象。它允许您收集表单数据，包括文件输入。
XHR： 一种异步通信技术，用于与服务器进行HTTP请求。它可以用于上传文件和其他数据。

前端文件上传步骤

1. 创建 HTML 表单

首先，您需要创建一个 HTML 表单，其中包含一个 "file" 类型的 <input> 元素，用户可以从中选择要上传的文件。

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

2. 准备 JavaScript 代码

接下来，您需要编写 JavaScript 代码来处理文件上传。这涉及创建 FormData 对象和发送 XHR 请求。

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(form);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);

  xhr.onload = () => {
    if (xhr.status === 200) {
      // 处理成功的响应
    } else {
      // 处理错误响应
    }
  };

  xhr.send(formData);
});

后端文件存储和处理

在后端，我们将使用 Koa 框架来接收和处理文件上传请求。

1. 安装 Koa

npm install koa

2. 创建 Koa 应用

const Koa = require('koa');

const app = new Koa();

3. 定义路由

您需要定义一个路由来处理文件上传请求。

app.post('/upload', async (ctx) => {
  const file = ctx.request.files.file;

  // 保存文件到服务器
  await file.mv(`./uploads/${file.name}`);

  // 返回成功的响应
  ctx.body = {
    message: '上传成功',
  };
});

4. 启动应用