RESTful API 是一种基于 HTTP 协议的 Web API 设计风格,它使用 HTTP 请求方法来操作资源,包括 GET、POST、PUT、DELETE 等方法。在实际应用中,我们可能需要上传和下载附件,例如图片、文件等。本文将介绍在 RESTful API 中如何处理附件上传和下载。
附件上传
上传方式
在 RESTful API 中,附件上传可以使用 HTTP POST 方法。在请求中,需要指定请求头 Content-Type 为 multipart/form-data,然后在请求体中添加一个或多个附件。
服务器端处理
在服务器端,可以使用常见的 Web 框架,例如 Express、Koa 等,来处理附件上传。以下是一个 Express 的示例代码:
// www.javascriptcn.com code example
const express = require('express');
const multer = require('multer');
const app = express();
// 设置文件保存路径和文件名
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads/');
},
filename: function(req, file, cb) {
cb(null, file.originalname);
}
});
// 创建上传对象
const upload = multer({ storage: storage });
// 处理上传请求
app.post('/upload', upload.array('files'), function(req, res, next) {
// 获取上传的文件信息
const files = req.files;
// 处理上传的文件,例如保存到数据库或者文件系统中
// 返回上传结果
res.send({ success: true, files: files });
});
app.listen(3000, function() {
console.log('Server started on port 3000');
});上述示例代码中,使用 multer 中间件来处理附件上传。multer 可以指定文件保存路径和文件名,也可以限制上传文件的类型和大小等。
客户端处理
在客户端,可以使用常见的 HTTP 客户端库,例如 axios、fetch 等,来发送附件上传请求。以下是一个 axios 的示例代码:
// www.javascriptcn.com code example
const axios = require('axios');
const formData = new FormData();
formData.append('files', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});上述示例代码中,使用 axios 发送附件上传请求。需要使用 FormData 对象来构建请求体,并指定请求头 Content-Type 为 multipart/form-data。
附件下载
下载方式
在 RESTful API 中,附件下载可以使用 HTTP GET 方法。在请求中,需要指定请求头 Accept 为对应的 MIME 类型,例如 image/jpeg、application/pdf 等。
服务器端处理
在服务器端,可以使用常见的 Web 框架,例如 Express、Koa 等,来处理附件下载。以下是一个 Express 的示例代码:
// www.javascriptcn.com code example
const express = require('express');
const app = express();
// 处理下载请求
app.get('/download/:filename', function(req, res, next) {
const filename = req.params.filename;
// 从数据库或文件系统中获取文件内容
const fileContent = getFileContent(filename);
// 设置响应头,指定 MIME 类型和文件名
res.set('Content-Type', 'image/jpeg');
res.set('Content-Disposition', 'attachment; filename=' + filename);
// 返回文件内容
res.send(fileContent);
});
app.listen(3000, function() {
console.log('Server started on port 3000');
});上述示例代码中,使用 Express 处理附件下载请求。需要根据请求参数获取对应的文件名,并从数据库或文件系统中获取文件内容。然后设置响应头,指定 MIME 类型和文件名,最后返回文件内容。
客户端处理
在客户端,可以使用常见的 HTTP 客户端库,例如 axios、fetch 等,来发送附件下载请求。以下是一个 axios 的示例代码:
// www.javascriptcn.com code example
const axios = require('axios');
axios.get('/download/filename.jpg', {
responseType: 'blob'
}).then(response => {
// 创建下载链接
const url = window.URL.createObjectURL(new Blob([response.data]));
// 创建下载链接的 a 标签
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.jpg');
// 触发下载
document.body.appendChild(link);
link.click();
}).catch(error => {
console.error(error);
});上述示例代码中,使用 axios 发送附件下载请求。需要指定 responseType 为 blob,以获取文件内容。然后创建下载链接和下载链接的 a 标签,最后触发下载。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d8d82ea941bf7134f78ac2