本文介绍如何使用 html 原生 `multiple` 属性配合 react 的受控/非受控输入，轻松实现用户一次性选择多个图片文件的功能，无需第三方库，兼容现代浏览器。
在 React 应用中，若需让用户一次选择多张照片，仅使用 <input type="file" /> 是不够的——默认情况下它只允许单文件选择。解决方法非常简洁：为 <input> 添加 multiple 布尔属性即可启用多选能力。
✅ 正确写法（支持多图选择）：
<input
type="file"
multiple
accept="image/*"
onChange={(e) => {
const files = e.target.files; // FileList 对象，包含所有选中的文件
if (files && files.length > 0) {
console.log(`共选中 ${files.length} 张图片`);
Array.from(files).forEach((file, index) => {
console.log(`第 ${index + 1} 张:`, file.name, file.type, file.size);
});
}
}}
/>? 关键说明：
- multiple 是原生 HTML 属性，React 中直接传入（无需 multiple={true}，布尔属性存在即生效）；
- accept="image/*" 可限制文件类型，提升用户体验（但不可替代后端校验）；
- e.target.files 返回的是只读的 FileList 对象，需用 Array.from() 转为数组才能使用 map/forEach 等方法；
- 若需预览图片，可结合 URL.createObjectURL(file) 生成临时 URL；
- 注意：<input> 在 React 中默认为非受控组件；如需完全受控（例如清空已选文件），需配合 value=""（但会带来额外复杂度，通常推荐非受控 + key 重置）。
? 小技巧：如需重置选择状态（例如“重新选择”按钮），可通过更新 input 的 key 强制重建 DOM 节点：
<button onClick={() => setKey(prev => prev + 1)}>清除已选</button>
<input key={key} type="file" multiple accept="image/*" onChange={handleFileChange} />总结：启用多图上传无需复杂封装，只需一行 multiple 属性 + 合理处理 FileList，即可快速、轻量、可靠地实现核心功能。
