本文讨论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文本框组件的易用性差不多了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。