文件上传 = 拖拽 + 多文件 + 文件夹

前端小魔女

已于 2024-05-24 23:06:15 修改

阅读量1k

点赞数 23

文章标签：前端

于 2024-04-08 10:24:07 首次发布

本文链接：https://blog.csdn.net/weixin_52884694/article/details/137498167

版权

从前往后看都是努力，从后往前看都是命运

大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder

前言

今天呢，和大家聊点耳熟能详的东西。文件上传。

讲到这里，大家不要嗤之以鼻，认为这不是分分钟就用组件库实现的吗？确实，现在很多成熟的组件库都提供了文件上传的功能，但是呢，它们只提供部分的功能。比方说，

但是呢，这些框架只是提供了上面的部分功能，而不是将上面的功能全部一网打尽。

我们来看一下Antd的文件上传的功能。

Antd_Upload能实现上述功能，但是不能将上面所有功能糅合到一起。因为多文件上传和文件夹上传它们实现原理是不同的。(Arco_Upload也是如此)。

所以，今天我们就来自己手搓一个文件上传。它所拥有的能力如下

也就是说，我们的文件上传可以上传你本地的任何文件。(除了系统文件，这个我们会提到)。

实现效果如下所示：

有人会说，人家都给你提供了组件，你为啥不用，你这不是重复造轮子吗？其实还真不是，之所以会出现这个问题，是因为现有的解决方案不支持我们的需求，我们才会大费周折的去找解决方案。

最后但同样重要的是：本文会提供一种解决方案，并且也会实现上述的所有功能，但是到后面文件上传到服务器的部分，这里就不做介绍了。也就是说，我们最后，通过操作能获取到Files信息，就认为这个组件封装成功了。

好了，天不早了，干点正事哇。

项目初始化

拖拽功能

处理input

处理文件&回调

唤起弹窗

因为，我们在做项目展示的时候，需要用到一些组件库和工具库，所以我们就抛弃vite/cra了，我们这里就直接使用我们的f_cli直接构建一个前端项目。

f_cli create upload_demo

如果你是一个老粉，你就知道，我们的f_cli是支持组件库选择的。在项目初始化时，我们可以选择组件库。

选择UI库

针对此次的demo我们就选择antd。然后，其他配置都按照你的心意来就完事了。

一顿操作之后，我们就有了一个功能完备的前端项目。

随后，我们可以执行yarn dev进行前端项目开发了。

也就说，我们下面的代码讲解和项目组织都是基于f_cli生成项目的基础上。

其实，针对拖拽功能的处理，我们有很多解决方案。

利用原生特性- 在DOM原生上新增draggable属性，然后监听dragstart/dragend等。可行吗，必须可行。但是，你需要处理和监听的事情很多。
- 如果对这块还有些陌生，可以参考MDN_drag对这块的解释
利用库，有很多业界比较出名的拖拽库能处理我们的问题，使用库的好处就是我们通过简单的API能够获取我们想要的数据和要实现的功能操作。（所以，我们就是用第三方库实现拖拽功能）下面就列举几个比较常见的拖拽库。

通过npm_trend得知，react-dropzone独占鳌头。所以，我们就选用react-dropzone作为我们的拖拽解决方案。

既然，材料和食谱都已经确定，那我们就需要烹饪我们的膳食了。

现在，我们把我们的上传场景再做一次限定，我们可以将我们整个页面作为我们的拖拽区域，这样我们就不必拘泥于特定组件了。(当然，这个区域是可以变更的)。

那么，我们为这个组件起一个霸气侧漏的名字 – FullScreenDropZone。看这名字多气派，FullScreen，它支持全屏范围内拖拽。也就是说，不管你把文件拖拽到页面的哪个位置，都可以触发文件上传功能。

关注