首页 > 其他分享 >React图片上传组件设计

React图片上传组件设计

时间:2023-06-15 15:04:57浏览次数:39  
标签:files React WebUploader 组件 上传 图片


本文讨论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文本框组件的易用性差不多了。


标签:files,React,WebUploader,组件,上传,图片
From: https://blog.51cto.com/u_16162111/6492509

相关文章

  • asp.net WebUploader 分块上传
    ​IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传......
  • 怎样用JspSmartUpload实现文件上传攻略
    ㈠表单要求 对于上传文件的FORM表单,有两个要求: 1、METHOD应用POST,即METHOD="POST"。 2、增加属性:ENCTYPE="multipart/form-data" 下面是一个用于上传文件的FORM表单的例子: <FORMMETHOD="POST"ENCTYPE="multipart/form-data"ACTION="/jspSmartUpload/up......
  • 初学者的React全家桶完整实例
    概述该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系。我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助。我在此再强调一下,在我写的这些文章末尾都附加了很多参考文献,而这些参考文献的作用对我的帮助真的很大,在此表示感谢!!!!!......
  • HTML5 WebUploader 分片上传
    ​ 一、基本介绍 1,什么是WebUploader?WebUploader是由百度公司团队开发的一个以HTML5为主,FLASH为辅的现代文件上传组件。官网地址:http://fex.baidu.com/webuploader/JS-文件上传组件WebUploader使用详解2(MD5秒传、判断是否已经上传过)2,功能特点分片、并发:WebUplo......
  • 界面控件DevExtreme UI组件——增强的自定义功能
    在本文中,我们将回顾DevExtremeUI组件在v22.2版本主要更新中一系列与自定义相关的增强。DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore......
  • 前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall
    前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046效果图如下:使用方法<!--proList:条目数组数据goProDetail:条目点击事件跳转(实现了点击条目数据传值)--><ccWaterLis......
  • 一个支持WinForms换肤的开源组件
    推荐一个一键换肤的WinForms皮肤组件。项目简介这是一个支持自定义WinForms窗口、控件颜色、禁用状态、动画效果的皮肤组件。支持的组件有:多选框、分割线、按钮、文本框、单选按钮、输入框、Tab控件、右键菜单、列表、进度条。组件只能一键统一更换,不能随意自定义设置主题,有......
  • vue+css: 引用的组件快速改变滚动条样式
    在a组件页面内有b组件,b组件产生的滚动条太丑不好看但是又不想改变b组件(b组件公共用的地方很多)又不想专门复制份在此基础上改。只要在使用的组件上增加css代码即可同时让组件内滚动条生效,原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效comp.vue<styl......
  • FTP上传错误----“200 Type set to I”
    用FilezillaServer做的FTP服务器,没有使用客户端上传东西,直接用win10的文件管理器访问上传文件,发现有的文件上传时会提示:”200TypesettoI“,(如下图所示) 一阵猛上网搜索,原以为是由于“主动模式”(Active)和“被动模式”(PASV)的模式,使用客户端测试好像都可以。几经折腾,一直没有......
  • vue封装包含区域内不可拖拽的可拖拽组件
    标题比较绕口,大概意思就是封装一个可拖拽组件,但是因为组件内有文件或者表单或者其它原因而不可在这个区域内使用拖拽,所以在绑定拖拽区域方法的同时限制不可拖拽区域。实现方式很简单  直接看代码drag.jsimportVuefrom'vue'exportconstdrag=Vue.directive('drag',{......