前端通过File API读取文件，使用FormData和fetch上传，结合Blob实现下载。示例：监听input的change事件获取文件，用FileReader读内容；上传时将文件append至FormData并发送；下载则创建Blob对象，生成URL后模拟a标签点击触发保存。支持文本、图片、二进制数据，如canvas导出或网络请求结果下载。需校验类型与大小以确保安全。现代浏览器及移动端均良好支持。
前端处理文件上传和下载是现代Web应用中的常见需求。JavaScript 提供了多种方式来实现文件的读取、上传和下载，尤其在浏览器端通过 File API 和 Blob 对象可以灵活操作用户选择的本地文件。
文件上传：使用 File API 读取用户选择的文件
当用户通过 <input type="file"> 选择文件后，JavaScript 可以通过事件对象访问文件列表。
示例代码：
const fileInput = document.getElementById('file-upload');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0]; // 获取第一个选中文件
if (!file) return;
console.log('文件名:', file.name);
console.log('文件大小:', file.size, '字节');
console.log('MIME类型:', file.type);
// 使用 FileReader 读取文件内容
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
console.log('文件内容:', content);
};
reader.readAsText(file); // 以文本形式读取（适用于 txt、json 等）
});
对于图片预览等场景，可使用 readAsDataURL：
立即学习“Java免费学习笔记（深入）”；
reader.readAsDataURL(file); // 结果为 base64 字符串，可用于 <img src>
上传文件到服务器
通常使用 FormData 配合 fetch 或 XMLHttpRequest 发送文件。
const formData = new FormData();
formData.append('uploadFile', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(err => {
console.error('上传失败:', err);
});
服务端需接收 multipart/form-data 格式的数据（如 Node.js 的 multer，Python 的 Flask/Django 处理等）。
触发文件下载：生成并下载 Blob 文件
JavaScript 可以创建 Blob 对象，并模拟点击链接实现文件下载。
例如，将一段文本保存为 .txt 文件：
function downloadText(content, filename) {
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url); // 释放内存
}
// 调用
downloadText('Hello, 世界！', 'greeting.txt');
同样适用于 JSON、CSV 等结构化数据导出。
处理二进制数据与跨格式下载
除了文本，还可以处理图像、PDF 等二进制文件下载。
比如从 canvas 导出图片：
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'drawing.png';
a.click();
URL.revokeObjectURL(url);
});
或从网络请求中下载文件：
fetch('/api/report.pdf')
.then(res => res.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
URL.revokeObjectURL(url);
});
基本上就这些。掌握 File API、Blob、FormData 和 fetch 的组合使用，就能在前端高效完成大多数文件上传和下载任务。注意兼容性方面，现代浏览器都已良好支持这些特性，移动端也基本可用。安全上不要忘记对上传文件做类型校验和大小限制，防止恶意输入。
