通过原生方法模仿antDesign自定义上传

前提：antDesign本身有上传组件，但是如果我需要获取文件真正的内容的话，利用antdesign的 Upload组件是没法获取的，但样式上需要复用antDesign，基于以上需求，以下是笔者尝试出的一种可行方案。

笔者使用的是react框架做的，但是方法是通用的
1：界面样式（jsx结构）

image.png

其中 importFile(this)是文件导入之后触发的函数。
2：js触发函数

image.png

3：CSS文件

image.png

在基本实现逻辑非常简单，就是将原生的 input[type=file]的样式隐藏掉，然后显示的是antdesign的Button的样式，通过Button组件的点击再去触发原生的input[type=file]的点击事件。
这样当我们点击按钮之后就会调用系统的文件窗口了。接下来，该如何获取文件里面的内容呢？
4：文件读取

image.png

通过FileReader这个公共类就能够将数据流转换成我们能识别的字符串内容了。
最后，这里会有一个坑，就是因为我们用了onChange来触发系统的窗口，也就是假如传入的文件内容相同，则不会触发此方法，这该如何解决呢？
其实这就是刚开始为何要在 input外加一层form标签的原因了，因为我们可以通过form表单的一个重置方法将前一次的导入内容清空，这样每次都能够触发 onChange方法了。

image.png

以上就所有内容了~~~~