我是如何一步一步设计一个高扩展的 Upload 组件的

#1

Upload 组件设计的目标是解决用户上传文件的便利性,但是中后台 Upload 组件的场景是多种多样的,所以可扩展能力是 Upload 组件不可忽视的另一方面。

同样为了大家能够更加容易的理解,我会从最原始的 input 标签开始说起

<form action="/api/file">
  <input type="file" />
  <button type="submit">submit</button>
</form>  

这段代码功能: 先选择一个文件,再点提交 POST 一个文件到一个接口。代码虽然不多,但是在实际使用中值得吐槽的点却不少,这里重点说两个点。

  • 在每个浏览器上面的表现是各不一样的。

    各浏览器里原生的 upload

先不说UI不美观,在每个主流浏览器上面的文案基本都不一样,另外在IE下面变化似乎有点大。我们可能的期望是在任何浏览器下交互和UI都一致的组件。

  • 文件上传完后页面会刷新带来的体验问题
    原生的文件上传都是通过form post 上传,上传完成后整个页面会重定向到 action 的地址。现在大家已经习惯了 ajax 做数据提交,因为可以不需要reload页面就可以带来整个页面的数据更新,无刷新更新的体验会提升很多。 我打算整片拆两个段来讲这个问题,拆分点大约从2012年附近开始,因为 html5 差不多在这个时间段开始被现代浏览器逐步支持。两个段分别叫传统解决方案和现代解决方案。

我们是如何解决上传问题的呢

详细可以看这里 https://zhuanlan.zhihu.com/p/56684600

欢迎一起讨论组件设计方案!!