React实现拖拽与选择文件功能 应选用第三方库还是原生input元素？

这个问题没有绝对的最优解，完全取决于你当前的项目约束和后续的功能扩展计划，两种方案的适用场景可以参考下面的判断标准：

推荐直接用原生input实现的情况 #

如果符合以下所有条件，完全没必要引入额外依赖：

• 需求固定，仅需要「点击按钮唤起文件选择」+「拖拽上传」两个核心交互，后续没有新增上传相关功能的计划
• 项目对体积控制要求严格，希望尽可能减少第三方依赖
• 需要高度自定义上传区域的UI样式，不想花时间覆盖第三方库的默认样式

原生实现的逻辑非常简单，核心只有两步：

1. 点击上传：隐藏原生<input type="file" multiple>元素，将自定义按钮和input的click事件绑定，选中文件后从event.target.files获取文件列表即可
2. 拖拽上传：给目标区域监听dragover、dragleave、drop三个事件，阻止默认行为后从drop事件的dataTransfer.files属性就能拿到拖拽的文件列表

极简实现的代码示例：

<input type="file" id="fileUploader" multiple style="display: none">
<button id="selectBtn">选择文件</button>
<div id="dropZone" style="width: 400px; height: 200px; border: 2px dashed #eee; display: flex; align-items: center; justify-content: center;">
  拖拽文件到此处上传
</div>

配套的JS逻辑不到100行就能写完，完全满足基础需求，没有任何额外冗余。

推荐使用第三方上传库的情况 #

如果符合以下任意一个条件，直接用成熟的第三方库性价比更高：

• 后续有扩展上传功能的可能：比如大文件分片上传、断点续传、上传进度展示、秒传、文件格式/大小前置校验、失败自动重试、多文件上传队列管理等
• 不想自己处理各类兼容和边界问题：比如不同浏览器对拖拽事件的行为差异、大文件上传的内存溢出问题、跨域上传的特殊处理、服务端返回错误的统一处理等
• 项目中已经有同类上传依赖，新增上传场景不会显著增加打包体积

成熟的上传库已经把绝大多数业务场景的坑都踩过了，你只需要按照文档配置参数即可，比自己从零实现节省大量调试时间。

最终判断标准 #

如果可以确认未来3个月内上传需求不会超出你当前描述的范围，直接用原生实现即可，轻量且灵活；如果有任何不确定的扩展可能，优先选第三方库，后续改需求的时候不用重写整套逻辑。

内容的提问来源于stack exchange，提问作者Avedis Maroukian