文件上传与下载的正确姿势，前端和后端默契配合！

2023-05-07 18:02:00

文件上传与下载：轻轻松松，掌握秘诀

在现代网络应用中，文件传输是不可或缺的一部分。从简单的图片上传到庞大的数据文件下载，掌握正确的文件上传和下载技术至关重要。本文将带你深入探究文件传输的奥秘，让你轻松应对各种场景。

前端文件选择与表单提交

文件传输的起点始于前端。通过 <input type="file"> 文件选择器，用户可以轻松选择本地文件。当用户选择文件后，表单会自动将文件信息打包成 FormData 对象，其中包含文件名称、类型、大小和内容。

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

接下来，可以通过 AJAX 或 Fetch 等方式将 FormData 对象发送给后端。

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

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

  const formData = new FormData(form);

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
  .then(response => {
    // 处理后端返回的数据
  })
  .catch(error => {
    // 处理错误
  });
});

后端文件接收与流处理

在后端，我们可以使用 Express 等框架来接收前端发送的文件数据。

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

const upload = multer();

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;

  // 处理文件数据
});

处理文件数据时，使用流的方式可以有效提升性能。

const fs = require('fs');

const file = req.file;

const readStream = fs.createReadStream(file.path);
const writeStream = fs.createWriteStream('new-file.txt');

readStream.pipe(writeStream);

前端文件下载

文件下载在前端可以通过 <a> 标签或 window.open() 方法实现。

<a href="/download" download>下载</a>

window.open('/download', '_blank');

后端文件下载服务

在后端，我们可以使用 Express 等框架提供文件下载服务。

const express = require('express');

const app = express();

app.get('/download', (req, res) => {
  const file = 'file.txt';

  res.download(file);
});