前后端分离文件上传下载架构详解
在现代的Web开发中，前后端分离是一种非常流行的架构设计方式。前后端分离的架构可以使前端与后端开发人员可以独立地进行工作，提高了系统的可维护性和扩展性。在这种架构下，文件上传下载是一个非常常见的需求，下面我们就来详细介绍一下前后端分离文件上传下载的架构设计。
架构图示
journey
title 前后端分离文件上传下载架构
section 上传文件
前端->后端: 发起上传请求
后端-->前端: 返回上传凭证
前端->OSS: 上传文件
OSS-->后端: 通知上传完成
后端->数据库: 存储文件信息
section 下载文件
前端->后端: 请求下载文件
后端->OSS: 下载文件
OSS-->后端: 返回文件
后端-->前端: 返回文件给前端
状态图示
stateDiagram
[*] --> 上传请求
上传请求 --> 生成凭证: 生成上传凭证
生成凭证 --> 文件上传: 转跳到文件上传
文件上传 --> 上传完成: 上传文件完成
上传完成 --> 存储文件信息: 存储文件信息
存储文件信息 --> [*]
[*] --> 下载请求
下载请求 --> 下载文件: 下载文件
下载文件 --> 返回文件: 返回文件给前端
返回文件 --> [*]
代码示例
前端代码示例
// 发起上传请求
fetch('/api/upload', {
method: 'POST',
body: JSON.stringify({ filename: 'example.jpg' }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
// 返回上传凭证
const { uploadToken } = data;
// 上传文件
fetch(uploadToken, {
method: 'PUT',
body: file
})
.then(() => {
// 上传完成
alert('文件上传成功');
});
});
后端代码示例
// 生成上传凭证
app.post('/api/upload', (req, res) => {
const { filename } = req.body;
const uploadToken = oss.generateUploadToken(filename);
res.json({ uploadToken });
});
// 存储文件信息
app.put('/api/upload', (req, res) => {
const { filename } = req.body;
// 存储文件信息到数据库
database.saveFile({ filename });
res.send('文件上传成功');
});
总结
通过以上的介绍，我们可以看到前后端分离文件上传下载的架构设计流程。前端发起上传请求，后端生成上传凭证并返回给前端，前端再将文件上传到OSS，上传完成后通知后端存储文件信息。下载文件时，前端请求后端下载文件，后端通过OSS下载文件并返回给前端。这种架构设计使得前后端各自负责不同的工作，提高了系统的可扩展性和可维护性，是一种非常值得推广的设计思想。
