在现代的Web开发中，前端与后端的交互已经成为了不可或缺的一部分。尤其是在文件上传和下载的场景中，前端需要将文件上传到后端，后端再将处理后的文件返回给前端。本文将介绍如何在前端和后端实现文件的上传和下载功能，并给出相关代码示例。
一、前端部分
前端使用HTML的<input>元素来接收用户选择的文件，并通过FormData对象将文件上传到后端。下面是一个简单的HTML和JavaScript代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
</head>
<body>
<h1>文件上传示例</h1>
<input type="file" id="fileInput" />
<button id="uploadBtn">上传文件</button>
<br />
<a id="downloadLink" style="display:none;">下载处理后的文件</a>
<script>
document.getElementById('uploadBtn').onclick = function() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = data.downloadUrl;
downloadLink.textContent = '下载处理后的文件';
downloadLink.style.display = 'block';
} else {
alert('上传失败: ' + data.message);
}
})
.catch(error => {
console.error('上传错误:', error);
});
};
</script>
</body>
</html>
二、后端部分
在后端，我们使用Node.js与Express框架来处理文件上传。我们需要安装multer中间件来处理文件上传：
npm install express multer
接下来，构建一个简单的Express服务器，如下所示：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const port = 3000;
// 配置 multer 存储
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/'); // 设置上传文件的存储路径
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname)); // 使用时间戳作为文件名
}
});
const upload = multer({ storage: storage });
// 处理文件上传请求
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).json({ success: false, message: '没有上传文件' });
}
// 这里可以对文件进行处理，之后返回下载链接
const fileUrl = `http://localhost:${port}/uploads/${req.file.filename}`;
res.json({ success: true, downloadUrl: fileUrl });
});
// 提供文件下载
app.use('/uploads', express.static('uploads')); // 静态文件服务
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
三、总结
在上面的代码示例中，我们实现了一个简单的文件上传和下载功能。当用户选择文件并点击“上传文件”按钮时，前端将文件通过fetchAPI发送到后端，后端接收到文件后，存储在本地，并返回文件的下载链接。前端则根据返回的链接，显示下载的链接。
这种前后端交互的方式在现代Web开发中是非常常见的，能够实现良好的用户体验。同时，注意在实际应用中，要考虑文件的安全性和错误处理。
![[前端]单点登录 SSO](http://img.makehui.com/231.jpg)
