JavaScript文件上传核心是用FormData构建数据并用fetch或XHR发送，浏览器自动处理multipart/form-data的Content-Type及boundary；需通过input.files获取文件，用append添加字段，注意不可手动设置Content-Type。
JavaScript 实现文件上传，核心是用 FormData 构建表单数据，并通过 fetch 或 XMLHttpRequest 发送到后端。关键在于正确收集文件、设置字段名、处理多文件和边界控制——浏览器会自动处理 Content-Type: multipart/form-data 及其 boundary，无需手动拼接。
如何创建并填充 FormData 对象
FormData 是专为表单数据（尤其是文件）设计的接口，支持追加文本字段和 Blob/File 对象。它天然适配 multipart/form-data 编码方式。
- 从
元素获取文件：用files属性（返回FileList），可取[0]单文件或遍历多文件 - 用
append()添加字段：formData.append('file', file)—— 第二个参数是File或Blob，第三个参数可选，用于指定服务端接收的文件名（如formData.append('file', file, 'avatar.jpg')） - 也可添加普通字段：
formData.append('username', 'Alice')，后端能像普通表单一样解析
上传单个文件的完整示例
假设页面有一个 和一个上传按钮：
const input = document.getElementById('upload');
const uploadBtn = document.getElementById('uploadBtn');
uploadBtn.addEventListener('click', async () => {
const file = input.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file); // 字段名需与后端约定一致
formData.append('desc', '用户头像上传');
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData // 直接传入，无需设 headers！浏览器自动设 Content-Type 并生成 boundary
});
const data = await res.json();
console.log('上传成功:', data);
} catch (err) {
console.error('上传失败:', err);
}
});
上传多个文件的处理方式
若 ，files 是类数组对象，可遍历添加。注意：同一字段名多次 append，后端通常收到文件数组（如 Express 的 req.files['files']）。
立即学习“Java免费学习笔记（深入）”；
- 按相同字段名追加：
formData.append('files', file1); formData.append('files', file2); - 或用不同字段名：
formData.append('file1', file1); formData.append('file2', file2);（适合固定数量） - 推荐第一种，更灵活；后端需支持多文件同名解析（如 multer 配置
array('files', 5)）
常见注意事项
-
不要手动设置
Content-Type：一旦给fetch或XHR设置了headers: {'Content-Type': '...'}，浏览器就不会自动注入boundary，导致后端无法解析 -
FormData不支持直接修改已添加的字段，如需更新，重新new FormData()或先清空再追加 - 调试时可用
console.log([...formData.entries()])查看当前所有键值对（但文件内容不会显示为原始数据） - 大文件建议加上传进度监听（
XMLHttpRequest.upload.onprogress或fetch需配合ReadableStream分块，较复杂）
