上传组件设计的目的是解决用户上传文件的方便，但是中后台上传组件的场景是多种多样的，所以可扩展性是上传组件的另一个方面这是不容忽视的。方面。也是为了大家更容易理解，我就从最原始的input标签submit开始这段代码的作用：先选中一个文件，然后点击提交将一个文件POST到一个界面。虽然代码不多，但是在实际使用中值得吐槽的点还是很多的。这里有两点需要重点关注。每个浏览器的性能是不同的。UI难看不说，各个主流浏览器上的文案基本都不一样，IE下的变化好像有点大。我们可能期望组件在任何浏览器下都具有一致的交互和UI。文件上传后，页面会刷新，导致体验问题。原文件上传是通过formpost方式上传的。上传完成后，整个页面会被重定向到该动作的地址。现在大家都习惯ajax进行数据提交，因为不需要重新加载页面就可以带来整个页面的数据更新，无刷新更新的体验会大大提升。我打算把整部电影分成两段来谈谈这个问题。分叉点会在2012年左右开始，因为html5会在这个时间左右逐渐得到现代浏览器的支持。这两个部分称为传统解决方案和现代解决方案。传统的解决方案是UI一致性问题。我们期望在任何浏览器中都具有相同的样式，例如按钮的样式上传文件将input设置为透明并覆盖按钮，让用户以为点击了按钮，但实际上点击了按钮上的input。这样就可以造成用户可以通过点击按钮来选择文件的“错觉”。搜索按钮实际上定位了输入。详细代码可以看这里：https://github.com/alibaba-fu...不刷新上传我们期望选择文件后立即上传文件。上传完成后，页面会直接显示上传状态。UploadFile提交时，表单指定目标到相应的iframe上传数据，使表单的数据通过隐藏的iframe提交。constdoc=this.refs.iframe.contentDocument;//获取iframeconstscript=doc.getElementsByTagName('script')[0];//清除iframe中无用的scriptif(script&&script.parentNode===doc.body){doc.body.removeChild(script);}constresponse=JSON.parse(doc.body.innerHTML);//获取返回的内容并解析成JSON，因为iframe上传后页面会整体刷新，然后通过监听iframe的onLoad事件获取返回的结果。获取返回内容然后反馈到主页面的代码可以看这里：https://github.com/alibaba-fu...现代上传解决方案html5出来后，可以直接获取通过输入File文件对象，然后将File封装成FormData，通过ajax提交到后台接口，实现文件上传。UI一致性问题不需要覆盖按钮上的input，而是通过监听父节点的click事件，在事件中触发input的click方法。
