React图片上传组件设计

本文讨论React图片上传组件的正确设计思路。

程序员对React图片上传组件主要有如下几点关心：

• 界面方面：

  • 自动提供图片预览功能，能删除错传的图，传图数量限制等。

• 编程方面：

  • 上传时机是否可以外部编程控制，如果是（1）即拍即传，则不能控制也无妨，如果是（2）批量上传，则外部需要有能力控制上传时机；
  • 每一张图片的上传状态，图片上传成功后对应的图片路径如何获得

那么，难点在哪里呢？ 即拍即传好办，无需控制上传时机。批量上传，则比较麻烦，有这么几种思路：

1. 外部拿到上传组件的控制器，以触发上传动作
2. 上传组件只负责界面，它对外输出为File数组

方法1比较丑陋，不符合React的一般设计模式。方法2比较漂亮，符合React组件的一般设计规则。

百度FEX设计的WebUploader非常优秀，不过就是太重，并且不太好移植到React里面去，用起来相当疙疙瘩瘩。如果能把WebUploader拆一下就好：

*. 前端部分，提供选择文件、删除文件、生成缩略图等功能。前端部分接受一个prop：onFileSelected(files)

 <Uploader onFileSelected={fileSelectedCallback} />

*. 上传功能部分，负责上传图片。

function fileSelectedCallback(files) {
  var uploader = new Uploader();
  uploader
  .on("allFileUploaded", function(fileInfos) {
      // 所有文件上传成功，处理更多内容
      // put your code here... 
   }).uploadFile(files);
}

经过这么一拆，beautiful！基本做到跟普通React文本框组件的易用性差不多了。