html模板无法封装多协议上传逻辑，因为input type="file"仅提供文件选择能力，不涉及传输协议；多协议（如form提交、fetch、分块上传、s3、webdav）需由javascript控制请求方式、头信息、重试等，html仅负责ui承载与事件触发。
不能靠 HTML 模板“封装集成多协议”——input type="file" 本身只提供文件选择能力，不涉及协议；所谓“多协议”实际指上传路径的多样性（如直接 form 提交、FormData + fetch、分块上传、WebDAV、S3 presigned URL 等），这些必须由 JavaScript 控制，HTML 模板只负责承载 UI 和触发事件。
为什么 template 里写不出“多协议”逻辑
HTML 是声明式标记语言，不执行逻辑。你写再多 <input multiple> 或 enctype="multipart/form-data"，都只是告诉浏览器“准备接收用户选的文件”，后续走 HTTP POST 还是 PUT，发到 /upload 还是 https://bucket.s3.amazonaws.com/...，全靠 JS 决定。
-
form提交只能走传统 POST +multipart/form-data，无法控制请求头、重试、进度、取消 - 想用 S3 presigned URL？必须用
fetch或XMLHttpRequest发 PUT 请求，且要手动设置Content-Type、签名头等 - WebDAV 上传需显式设
method="PUT"，并处理 409 Conflict、ETag 校验等，form根本不支持 - 分块上传依赖
File.slice()+ 多次请求 + 合并逻辑，纯 HTML 无能为力
name 和 multiple 的真实作用边界
它们只影响前端数据采集方式和后端解析预期，不改变传输协议：
-
multiple让input.files返回FileList，否则永远只有input.files[0] -
name="files[]"是给 PHP/Express 等后端框架的提示，让它们把同名字段聚合成数组；Node.js 的multer需配upload.array('files')才能收全，不是靠 name 自动生效 - 如果走
FormData.append('files', file)多次，后端是否收到多个，取决于它是否启用「同名多值」解析——这和 HTML 模板无关，是后端中间件配置问题 - 别在 template 里写
accept=".pdf,.jpg"就以为安全了：用户切到“所有文件”就能绕过，类型校验必须在 JS 读取file.type或后端检查二进制魔数
真正可封装的“协议切换点”在 JS 层
一个可用的封装思路是：HTML 提供统一入口（如 <input type="file" ref="picker">），JS 根据配置决定后续动作：
- 配置
protocol: 'form'→ 插入隐藏form，自动 submit，适合简单后端 - 配置
protocol: 'fetch'→ 用FormData构造，fetch(url, { method: 'POST', body }) - 配置
protocol: 's3-put'→ 调fetch(presignedUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } }) - 配置
protocol: 'tus'→ 引 tus-js-client，传file给new tus.Upload()
关键不是模板怎么写，而是 JS 怎么桥接：input 只负责吐出 FileList，剩下的全是 runtime 决定的事。
容易被忽略的兼容性硬伤
某些“协议”在特定环境根本跑不通，光靠模板掩盖不了：
- iOS Safari 15.4 之前不支持
webkitdirectory，文件夹上传直接失效，降级方案得 JS 判断并提示 - IE11 不支持
FormData.append(file)直接传File实例，必须用Blob包一层，否则报错InvalidStateError - WebDAV 的
OPTIONS预检可能被 CDN 拦截，导致 405，这不是前端模板能解决的，得协调运维开白名单 - 大文件分块时，
File.slice()在 Safari 中对 >2GB 文件会静默失败，必须提前用file.size做分片数预判
协议切换不是加个下拉框就行，每个分支都要有独立的错误捕获、重试策略和 fallback 提示——这些没法塞进 HTML 模板里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
