本文讨论React图片上传组件的正确设计思路。
程序员对React图片上传组件主要有如下几点关心:
- 界面方面:
- 自动提供图片预览功能,能删除错传的图,传图数量限制等。
- 编程方面:
- 上传时机是否可以外部编程控制,如果是(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文本框组件的易用性差不多了。