input type="file"仅触发文件选择且需手动桥接上传：必须监听change事件获取files、用formdata.append()提交、禁设content-type头、form需enctype="multipart/form-data"。
input type="file 本身不上传文件，只负责选择——这是所有卡住的起点。你点了它，没反应、没上传、后端收不到，大概率不是后端问题，而是前端漏了关键环节。
为什么 input type="file 点了没上传？
因为它的职责仅限于触发系统文件选择器，并把选中的文件挂到 e.target.files 上。它不会自动发请求，也不关心后端在哪。
- 没监听
change事件 → 用户选完文件，JS 完全无感知 - 监听了但没取
e.target.files[0]（单选）或遍历e.target.files（多选）→ 文件对象根本没拿到 - 拿了文件却直接
JSON.stringify(file)或当普通对象传 → 二进制数据丢失，后端收到空或报错 - 用了
display: none隐藏input→ 浏览器禁用交互，点击无效（需用opacity: 0+ 绝对定位覆盖按钮）
用 fetch + FormData 上传文件（推荐）
这是现代、可控、可加进度/取消/重试的方式。核心是让浏览器自己处理 multipart/form-data 的 boundary，别插手。
-
FormData.append('upload', file)中第一个参数（字段名）必须和服务端约定一致，比如后端 expectavatar，这里就得写'avatar' - 不能手动设置
headers: { 'Content-Type': 'multipart/form-data' }→ 会破坏 boundary，导致后端解析失败 - 要传额外参数（如
user_id），直接formData.append('user_id', '123')即可，和文件一起发 - 大文件建议先检查
file.size，前端拦截：if (file.size > 100 * 1024 * 1024) { alert('文件不能超过100MB'); return; }
用 form 提交上传时，enctype 忘了设会怎样？
会静默失败：文件字段在后端变成空字符串或完全不可见，日志里也难排查。
- 必须显式写
<form enctype="multipart/form-data" method="POST"></form>，GET不支持文件上传 -
input[type="file"]必须有name属性，否则表单提交时该字段不会被包含 - 如果用了
multiple，后端接收的是文件数组，不是单个文件（例如 PHP 的$_FILES['files']['name']是数组） - 移动端微信 WebView 对
accept=".pdf"支持差，应改用accept="application/pdf"
input type="file" 能不能切片上传？
不能。它只提供 File 对象，而 File.slice() 是 JS 层行为，与 HTML 标签无关。
- 切片逻辑必须由 JS 主动实现：用
file.slice(start, end)拆出Blob，再逐个fetch发送 - 一旦走
<form>.submit()</form>，就进入传统全量提交流程，无法插入分片逻辑 - 若要断点续传，需服务端配合记录已接收的 chunk 偏移量，前端按序补传，
input标签本身不参与任何状态管理
真正容易被忽略的，是 input type="file" 和上传行为之间那层“必须手动桥接”的事实——它不自动、不智能、不隐式，所有控制权都在你写的 JS 里。漏掉一个 change 监听，或手抖加了个 Content-Type header，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
