如何通过 RESTful API 上传和下载文件？-JavaScript中文网-JavaScript教程资源分享门户

RESTful API 是现代 Web 开发中最流行的 API 设计风格之一。它提供了一种简洁、灵活和可扩展的方式来访问 Web 资源。在本文中，我们将介绍如何使用 RESTful API 在前端中上传和下载文件。

上传文件

在前端中上传文件是一项常见的任务。通常，我们会使用 <input type="file"> 元素来实现这个功能。但是，当我们需要通过 RESTful API 上传文件时，我们需要使用其他的方法。

使用 FormData 对象上传文件

在前端中使用 RESTful API 上传文件的最常见方法是使用 FormData 对象。这个对象提供了一种简单的方式来将表单数据和文件一起发送到服务器。以下是一个使用 FormData 对象上传文件的示例代码：

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();

formData.append('file', fileInput.files[0]);

fetch('/api/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例代码中，我们首先获取了 <input type="file"> 元素，并将其包装在 FormData 对象中。然后，我们使用 fetch() 方法将 FormData 对象发送到服务器。

在服务器端，我们可以使用任何支持文件上传的框架来处理上传的文件。以下是使用 Express.js 框架处理文件上传的示例代码：

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

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({ message: 'File uploaded successfully' });
});

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

在这个示例代码中，我们使用 multer 中间件来处理文件上传。我们将上传的文件保存在 uploads/ 目录中，并在控制台输出上传的文件信息。

使用 Base64 编码上传文件

另一种上传文件的方法是使用 Base64 编码。这种方法将文件转换为 Base64 字符串，并将其包含在 JSON 对象中发送到服务器。以下是一个使用 Base64 编码上传文件的示例代码：

const fileInput = document.querySelector('input[type="file"]');

const reader = new FileReader();
reader.readAsDataURL(fileInput.files[0]);

reader.onload = () => {
  const data = {
    name: fileInput.files[0].name,
    type: fileInput.files[0].type,
    data: reader.result.split(',')[1]
  };

  fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
};

在这个示例代码中，我们使用 FileReader 对象将文件转换为 Base64 字符串，并将其包装在一个 JSON 对象中。然后，我们使用 fetch() 方法将这个 JSON 对象发送到服务器。

在服务器端，我们需要将 Base64 字符串转换为文件。以下是一个使用 Node.js 中的 fs 模块将 Base64 字符串转换为文件的示例代码：

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

const app = express();

app.post('/api/upload', (req, res) => {
  const data = req.body;
  const buffer = Buffer.from(data.data, 'base64');

  fs.writeFile(`uploads/${data.name}`, buffer, (err) => {
    if (err) {
      console.error(err);
      res.status(500).json({ message: 'Internal server error' });
    } else {
      res.json({ message: 'File uploaded successfully' });
    }
  });
});

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

在这个示例代码中，我们首先将 Base64 字符串转换为 Buffer 对象。然后，我们使用 fs.writeFile() 方法将 Buffer 对象写入到文件中。

下载文件

通过 RESTful API 下载文件也是一项常见的任务。通常，我们会将文件的 URL 返回给客户端，然后客户端使用这个 URL 下载文件。以下是一个使用 Express.js 框架返回文件 URL 的示例代码：

const express = require('express');

const app = express();

app.get('/api/download', (req, res) => {
  const fileUrl = 'http://example.com/files/example.pdf';
  res.json({ url: fileUrl });
});

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

在这个示例代码中，我们返回了一个文件的 URL。客户端可以使用这个 URL 下载文件。

使用 Blob 对象下载文件

在前端中使用 RESTful API 下载文件的最常见方法是使用 Blob 对象。这个对象提供了一种简单的方式来将文件下载到客户端。以下是一个使用 Blob 对象下载文件的示例代码：

fetch('/api/download')
  .then(response => response.json())
  .then(data => {
    const link = document.createElement('a');
    link.href = data.url;
    link.download = 'example.pdf';
    link.click();
  })
  .catch(error => console.error(error));

在这个示例代码中，我们首先使用 fetch() 方法获取文件的 URL。然后，我们创建一个 <a> 元素，并将 URL 赋值给它的 href 属性。我们还将文件名设置为 download 属性。最后，我们使用 click() 方法触发下载。

使用 Base64 编码下载文件

另一种下载文件的方法是使用 Base64 编码。这种方法将文件转换为 Base64 字符串，并将其包含在 JSON 对象中发送到客户端。以下是一个使用 Base64 编码下载文件的示例代码：

fetch('/api/download')
  .then(response => response.json())
  .then(data => {
    const link = document.createElement('a');
    link.href = `data:${data.type};base64,${data.data}`;
    link.download = data.name;
    link.click();
  })
  .catch(error => console.error(error));

在这个示例代码中，我们首先使用 fetch() 方法获取文件的 Base64 字符串。然后，我们创建一个 <a> 元素，并将 Base64 字符串设置为 href 属性。我们还将文件名设置为 download 属性。最后，我们使用 click() 方法触发下载。

在服务器端，我们需要将文件转换为 Base64 字符串。以下是一个使用 Node.js 中的 fs 模块将文件转换为 Base64 字符串的示例代码：

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

const app = express();

app.get('/api/download', (req, res) => {
  const filePath = 'uploads/example.pdf';

  fs.readFile(filePath, (err, data) => {
    if (err) {
      console.error(err);
      res.status(500).json({ message: 'Internal server error' });
    } else {
      const base64Data = data.toString('base64');
      const mimeType = 'application/pdf';

      res.json({ name: 'example.pdf', type: mimeType, data: base64Data });
    }
  });
});

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

在这个示例代码中，我们首先使用 fs.readFile() 方法读取文件。然后，我们将文件转换为 Base64 字符串，并将其包装在一个 JSON 对象中。最后，我们将这个 JSON 对象发送到客户端。

总结

在本文中，我们介绍了如何使用 RESTful API 在前端中上传和下载文件。我们讨论了使用 FormData 对象和 Base64 编码上传文件的方法，以及使用 Blob 对象和 Base64 编码下载文件的方法。我们还提供了示例代码，帮助您更好地理解这些方法。这些技术对于现代 Web 应用程序的开发非常重要，希望本文能对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e7461eb4cecbf2d44fd47