HTML模板（<template>）本身不支持文件流处理，必须由JavaScript在组件实例化后主动触发；所有文件选择、读取、校验、预览逻辑均需写在JS类或函数中，模板仅负责结构复用。
纯 HTML 模板（<template>）本身不支持文件流处理——它只是静态 DOM 片段容器，没有解析、读取或转换二进制数据的能力。真正做文件流处理（如读取 File 对象、用 FileReader 解析、转成 ArrayBuffer 或 Blob）必须靠 JavaScript，在组件实例化后主动触发。
为什么不能在 <template> 里写文件处理逻辑
<template> 的内容不会执行脚本、不解析 <script> 标签、不绑定事件监听器，也不响应用户交互。你把它克隆进 DOM 后，里面那些 onchange="handleFile()" 或内联 addEventListener 都是无效的——除非你在 JS 里手动补上。
- 模板只负责结构复用，不是运行时环境
- 所有文件选择、读取、校验、预览逻辑必须写在 JS 类或函数中
- 若直接把
FileReader代码塞进innerHTML字符串里，会报ReferenceError: FileReader is not defined
customElements.define() 组件中集成文件流处理的正确姿势
要用 Web Components 封装带文件处理能力的组件，核心是：模板声明结构 + 类中接管事件 + 手动调用 FileReader 或 URL.createObjectURL()。
- 在
constructor()中创建 shadow root，但**不要**往里面写文件处理逻辑 - 在
connectedCallback()中插入模板内容，并立即对<input type="file">绑定change事件 - 事件处理器里获取
event.target.files[0]，再用new FileReader()读取；或用URL.createObjectURL(file)快速生成预览链接 - 避免在
attributeChangedCallback()里处理文件——属性变更 ≠ 文件输入，容易误触发
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
class FileUpload extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>:host { display: block; } input { margin: 8px; }</style>
<input type="file" accept="image/*">
<img id="preview" style="max-width: 200px;">
`;
const input = this.shadowRoot.querySelector('input');
input.addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);
this.shadowRoot.querySelector('#preview').src = url;
// 若需读取内容：const reader = new FileReader(); reader.readAsText(file);
});
}
}
customElements.define('file-upload', FileUpload);
用 <template> + 工厂函数做轻量文件组件的限制与绕过
如果不想用 Custom Elements，只靠 <template> 和 JS 实例化，也能封装，但必须显式传入文件处理逻辑——模板本身不承载行为。
- 模板里只放结构：
<template id="file-card"><div><input type="file"><output></output></div></template> - 工厂函数接收一个
onFileSelect回调，绑定到 input 的change事件上 - 调用时必须传函数：
createFileCard({ onFileSelect: (file) => console.log(file.name) }) - 无法自动响应属性更新（比如
accept变了），得手动同步到 input 元素
这种模式适合小页面、无生命周期需求的场景；一旦需要状态保持、多次上传、错误重试，就得升级到 Custom Elements。
真正容易被忽略的是：文件流处理必然涉及异步（FileReader.onload）、内存管理（URL.revokeObjectURL()）、类型校验（file.type、file.size）和错误边界（FileReader.onerror）。这些都不能靠模板“封装”出来，只能靠 JS 主动组织——模板只是你画布上的草图，不是画笔本身。
