前提：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
以上就所有内容了~~~~
网友评论