17370845950

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']）。

• 按相同字段名追加：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 分块，较复杂）