RESTful API 实现文件上传与下载-JavaScript中文网-JavaScript教程资源分享门户

RESTful API 是一种基于 HTTP 协议的网络应用程序接口设计风格，它是一种轻量级、灵活、简单且易于扩展的 API 设计方式。RESTful API 实现文件上传与下载是一种常见的需求，本文将详细介绍如何使用 RESTful API 实现文件上传与下载，并提供示例代码供参考。

文件上传

文件上传是指将本地文件传输到服务器上的过程，常见的文件上传方式有两种：表单上传和 AJAX 上传。表单上传是通过 HTML 表单提交方式实现，而 AJAX 上传则是通过 JavaScript 发送异步请求实现。本文将介绍如何使用 AJAX 上传文件。

AJAX 上传文件

AJAX 上传文件的核心代码如下所示：

// javascriptcn.com 代码示例
function uploadFile(file) {
  var formData = new FormData();
  formData.append('file', file);

  $.ajax({
    url: '/api/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log('Upload successful:', data);
    },
    error: function(xhr, status, error) {
      console.error('Upload failed:', error);
    }
  });
}

在上传文件之前，需要先创建一个 FormData 对象，并将文件添加到其中。然后使用 jQuery 的 $.ajax() 方法发送 POST 请求，其中设置 processData 和 contentType 为 false，以确保发送的数据不被序列化为字符串。上传成功后，服务器返回的数据将会在 success 回调函数中处理。

RESTful API 实现文件上传

使用 RESTful API 实现文件上传需要遵循以下几个步骤：

设计 API 接口，包括请求方法、请求路径、请求参数等。
在服务器端实现上传文件的逻辑。
在客户端调用 API 接口，上传文件。

具体实现方式如下所示：

设计 API 接口

设计 API 接口需要考虑以下几个因素：

请求方法：使用 POST 方法上传文件。
请求路径：使用 /api/upload 路径上传文件。
请求参数：请求参数为一个文件。

因此，API 接口的设计如下所示：

POST /api/upload
Request:
- file: 上传的文件

Response:
- status: 状态码，200 表示上传成功，其他状态码表示上传失败
- message: 上传结果信息

服务器端实现上传文件的逻辑

服务器端可以使用 Node.js 的 Express 框架实现上传文件的逻辑，代码如下所示：

// javascriptcn.com 代码示例
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) => {
  if (req.file) {
    console.log('File uploaded successfully:', req.file);
    res.status(200).json({
      status: 200,
      message: 'File uploaded successfully'
    });
  } else {
    console.error('File upload failed');
    res.status(500).json({
      status: 500,
      message: 'File upload failed'
    });
  }
});

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

在 Express 中，使用 multer 中间件处理上传的文件。上传成功后，返回一个包含状态码和上传结果信息的 JSON 对象。

客户端调用 API 接口，上传文件

客户端可以使用 AJAX 调用 API 接口，上传文件，代码如下所示：

// javascriptcn.com 代码示例
function uploadFile(file) {
  var formData = new FormData();
  formData.append('file', file);

  $.ajax({
    url: '/api/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log('Upload successful:', data);
    },
    error: function(xhr, status, error) {
      console.error('Upload failed:', error);
    }
  });
}

文件下载

文件下载是指将服务器上的文件下载到本地的过程，常见的文件下载方式有两种：使用 a 标签下载和 AJAX 下载。使用 a 标签下载是通过 HTML a 标签实现，而 AJAX 下载则是通过 JavaScript 发送异步请求实现。本文将介绍如何使用 AJAX 下载文件。

AJAX 下载文件

AJAX 下载文件的核心代码如下所示：

// javascriptcn.com 代码示例
function downloadFile(filename) {
  $.ajax({
    url: '/api/download',
    type: 'POST',
    data: { filename: filename },
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {
      var blob = new Blob([data], { type: 'application/octet-stream' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    },
    error: function(xhr, status, error) {
      console.error('Download failed:', error);
    }
  });
}

使用 jQuery 的 $.ajax() 方法发送 POST 请求，其中设置 xhrFields 的 responseType 为 blob，以确保返回的数据类型为二进制流。下载成功后，将二进制流转换为 Blob 对象，并使用 URL.createObjectURL() 方法创建一个 URL，然后创建一个 a 标签，设置 href 为 URL，download 为文件名，最后触发 a 标签的 click 事件，完成文件下载。

RESTful API 实现文件下载

使用 RESTful API 实现文件下载需要遵循以下几个步骤：

设计 API 接口，包括请求方法、请求路径、请求参数等。
在服务器端实现下载文件的逻辑。
在客户端调用 API 接口，下载文件。

具体实现方式如下所示：

设计 API 接口

设计 API 接口需要考虑以下几个因素：

请求方法：使用 POST 方法下载文件。
请求路径：使用 /api/download 路径下载文件。
请求参数：请求参数为文件名。

因此，API 接口的设计如下所示：

POST /api/download
Request:
- filename: 文件名

Response:
- status: 状态码，200 表示下载成功，其他状态码表示下载失败
- data: 文件数据，二进制流

服务器端实现下载文件的逻辑

服务器端可以使用 Node.js 的 Express 框架实现下载文件的逻辑，代码如下所示：

// javascriptcn.com 代码示例
const express = require('express');
const fs = require('fs');

const app = express();

app.post('/api/download', (req, res) => {
  const filename = req.body.filename;
  const filepath = `uploads/${filename}`;

  if (fs.existsSync(filepath)) {
    const stream = fs.createReadStream(filepath);
    stream.on('open', () => {
      res.setHeader('Content-Type', 'application/octet-stream');
      res.setHeader('Content-Disposition', `attachment; filename=${filename}`);
      stream.pipe(res);
    });
    stream.on('error', (err) => {
      console.error('Download failed:', err);
      res.status(500).json({
        status: 500,
        message: 'Download failed'
      });
    });
  } else {
    console.error('File not found:', filename);
    res.status(404).json({
      status: 404,
      message: 'File not found'
    });
  }
});

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

在 Express 中，使用 fs 模块读取上传的文件，并将文件数据通过流的方式返回给客户端。

客户端调用 API 接口，下载文件

客户端可以使用 AJAX 调用 API 接口，下载文件，代码如下所示：

// javascriptcn.com 代码示例
function downloadFile(filename) {
  $.ajax({
    url: '/api/download',
    type: 'POST',
    data: { filename: filename },
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {
      var blob = new Blob([data], { type: 'application/octet-stream' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    },
    error: function(xhr, status, error) {
      console.error('Download failed:', error);
    }
  });
}

总结

本文详细介绍了如何使用 RESTful API 实现文件上传与下载，包括 AJAX 上传文件、AJAX 下载文件、API 接口设计、服务器端实现、客户端调用等内容。通过阅读本文，读者可以了解 RESTful API 实现文件上传与下载的具体实现方式，以及相关的技术细节和注意事项。同时，本文提供了示例代码供读者参考，帮助读者更好地理解和应用本文所介绍的内容。

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