如何通过HTML5中FormData对象配合FetchAPI实现异步表单文件提交-H5教程-PHP中文网

使用 formdata 构造表单数据并用 fetch 发送是现代前端文件上传最简洁可靠的方式：1. 用 new formdata() 初始化，append 添加字段和文件；2. fetch 直接传入 formdata 作 body，不设 headers；3. 注意后端返回 json 类型及大文件进度监听限制。

如何通过html5中formdata对象配合fetchapi实现异步表单文件提交

直接用 FormData 构造表单数据，再通过 fetch 发送，无需手动序列化、不用设置 Content-Type（浏览器自动设为 multipart/form-data 并附带正确 boundary），是现代前端上传文件最简洁可靠的方式。

1. 创建 FormData 并填充字段和文件

从表单元素创建可选，但推荐显式构造，便于控制字段顺序和动态添加内容：

用 new FormData() 初始化空对象
调用 .append(key, value) 添加文本字段或 File 对象（如 input[type="file"].files[0]）
同名多文件可多次 append（后端按数组接收），或传入 FileList（如 input.files）

示例：

const formData = new FormData();
formData.append('username', 'alice');
formData.append('avatar', document.getElementById('avatar').files[0]);
formData.append('photos', document.getElementById('photos').files[0]);
formData.append('photos', document.getElementById('photos').files[1]); // 多图上传

2. 使用 fetch 提交，不设 headers

FormData 本身已包含完整 multipart 结构，若手动设置 Content-Type，浏览器将无法自动注入 boundary，导致后端解析失败。只需：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

指定请求方法为 POST
将 formData 直接作为 body 传入
不配置 headers（尤其避免 Content-Type）

示例：

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));

3. 处理响应与常见问题

后端返回 JSON 是常规做法，但注意：

确保后端实际返回 application/json，否则 res.json() 会报错
上传大文件时可监听 upload.onprogress —— 但需从 fetch 的 AbortController + ReadableStream 或改用 XMLHttpRequest 实现进度，原生 fetch 不支持上传进度事件
如需带认证，可加 credentials: 'include' 或 headers: { Authorization: 'Bearer xxx' } —— 但后者仅适用于非 FormData 场景；若必须鉴权且用 FormData，应由后端通过 Cookie 或 token 字段校验

4. 完整可运行示例（含错误处理）

HTML 片段：

JS 逻辑：

document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const formData = new FormData(form); // 自动提取所有 input[name] 值

  try {
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const result = await res.json();
    console.log('结果:', result);
  } catch (err) {
    console.error('上传失败:', err);
  }
});