附件精致上传

为什么需要它

原生 <input type=file> 表单控件交互简陋，用户上传执照、名片等材料时无法直观预览图片效果，多文件管理也缺乏队列排序、快速移除等基础能力。当业务需要「上传过程可视化」时，自行封装进度条、缩略图生成与服务端对接逻辑往往耗费数小时调试时间。

如何运作

这个技能基于 FilePond 库实现精致上传体验，核心分为三个阶段：

• 隐藏原生控件：通过 CSS 隐藏默认 <input>，用 FilePond.create(inputElement, options) 挂载增强型上传组件，保持表单兼容性的同时替换交互层
• 配置校验规则：通过 acceptedFileTypes（如 image/png,image/jpeg）限制格式，maxFileSize（如 2MB）控制体积，直接拦截不合规文件
• 对接服务端：配置 server 选项指向上传 API，或通过 fnBeforeUpload 钩子实现自定义上传逻辑，保持与现有后端架构兼容

生命周期管理是关键：组件卸载时必须调用 FilePond.destroy(inputElement) 销毁实例，避免内存泄漏和重复渲染导致的事件绑定异常。

使用边界

• UI 交互增强：适合需要图片即时预览（依赖 filepond-plugin-image-preview 插件）、多文件拖拽排序的场景，如客户资料上传、作品集提交等
• 开发约束：

- 必须安装 filepond 核心库（npm i filepond），按需引入图片预览插件
- 与 Dropzone 类技能不能同区域混用，否则会出现重复上传控件堆叠
- 服务端存储逻辑需自行实现，技能仅处理前端上传交互层

自测要点：验证超大文件被类型/体积限制拦截、图片预览插件正确加载、组件销毁后无残留实例三个核心场景。