React中如何实现input组件一次性批量上传多个文件功能

原生文件夹批量上传实现 #

给<input type="file">添加对应属性即可直接实现批量选择文件/选择文件夹功能，不需要额外引入第三方依赖：

• 新增multiple属性：支持同时选中多个图片文件一次性导入
• 新增webkitdirectory属性：支持选中整个文件夹，浏览器会自动遍历文件夹下所有文件，返回完整的File列表
• 限制仅可选图片：补充accept="image/*"属性过滤文件类型
  示例代码：

<input type="file" id="uploadInput" accept="image/*" multiple webkitdirectory>

用户选择完成后，直接读取document.getElementById('uploadInput').files就能拿到所有选中的图片文件，可直接批量提交到后端，或用FileReader API生成预览地址在页面渲染。

RAR压缩包上传解析实现 #

支持导入RAR格式压缩包需要做前后端配合，也可选择纯前端轻量方案：

• 前端配置：修改input的accept属性，新增application/x-rar-compressed,application/rar支持选中RAR文件，获取压缩包的File对象后可直接提交到后端，或传入前端解压库处理
• 后端方案（更稳定）：后端接收到压缩包后，先做格式合法性、文件大小校验，再解压RAR文件过滤出所有图片格式文件，存储后返回图片访问地址给前端展示，这种方案对大体积压缩包兼容性更好，也能做恶意文件扫描规避安全风险
• 纯前端方案：前端引入RAR解析库，在浏览器侧直接解压提取图片生成预览，适合小体积压缩包场景，缺点是大压缩包会占用过多浏览器内存导致卡顿。

注意事项 #

• 可根据业务需求配置单文件大小、总文件数量、总上传大小限制，避免请求超限失败
• 压缩包上传场景必须做好文件校验，避免非图片文件、恶意文件上传风险
• webkitdirectory属性目前为浏览器前缀实现，但Chrome、Edge、Firefox、Safari 11.1+等所有主流现代浏览器均已支持，无需兼容老旧浏览器可直接使用

内容的提问来源于stack exchange，提问作者Sergiu Tonț