位置: 编程技术 - 正文

基于Node的React图片上传组件实现实例代码(node react vue)

编辑:rootadmin

推荐整理分享基于Node的React图片上传组件实现实例代码(node react vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nodejs reactor,node react vue,nodejs reactjs,node react,node react,nodejs reactor,nodejs reactor,react基于nodejs,内容如对您有帮助,希望把文章链接给更多的朋友!

写在前面

红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助。

前端实现

遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可。

uri 参数是必须传的,是图片上传的后端接口地址,接口怎么写下面会讲到。

渲染页面

组件render部分需要体现三个功能:

图片选取(dialog窗口) 可拖拽功能(拖拽容器) 可预览(预览列表) 上传按钮 (button) 上传完成图片地址和链接 (信息列表)

主render函数

渲染图片预览列表

渲染图片上传信息列表

文件上传

前端要实现图片上传的原理就是通过构建FormData对象,把文件对象append()到该对象,然后挂载在XMLHttpRequest对象上 send() 到服务端。

获取文件对象

获取文件对象需要借助 input 输入框的 change 事件来获取 句柄参数 e

然后做以下处理:

这时 files 就是 我们需要的文件对象组成的数组,把它 concat 到原有的 files里。

如此,接下来的操作 就可以 通过 this.state.files 取到当前已选中的 图片文件。

利用Promise处理异步上传

文件上传对于浏览器来说是异步的,为了处理 接下来的多图上传,这里引入了 Promise来处理异步操作:

上传进度计算

利用XMLHttpRequest对象发异步请求的好处是可以 计算请求处理的进度,这是fetch所不具备的。

我们可以为 xhr.upload 对象的 progress 事件添加事件监听:

说明:idx参数是纪录多图上传队列的索引

拖拽上传

拖拽文件对于HTML5来说其实非常简单,因为它自带的几个事件监听机制可以直接做这类处理。主要用到的是下面三个:

基于Node的React图片上传组件实现实例代码(node react vue)

取消拖拽时的浏览器行为:

处理拖拽进来的文件:

多图同时上传

支持多图上传我们需要在组件调用处设置属性:

然后我们可以使用 Promise.all() 处理异步操作队列:

好了,前端工作已经完成,接下来就是Node的工作了。

后端实现

为了方便,后端采用的是express框架来快速搭建Http服务和路由。具体项目见我的github node-image-upload。逻辑虽然简单,但还是有几个可圈可点的地方:

跨域调用

本项目后端采用的是express,我们可以通过 res.header() 设置 请求的 “允许源” 来允许跨域调用:

设置为 * 说明允许任何 访问源,不太安全。建议设置成 你需要的 二级域名,如 jafeney.com。

除了 “允许源” ,其他还有 “允许头” 、”允许域”、 “允许方法”、”文本类型” 等。常用的设置如下:

ES6下的Ajax请求

ES6风格下的Ajax请求和ES5不太一样,在正式的请求发出之前都会先发一个 类型为 OPTIONS的请求 作为试探,只有当该请求通过以后,正式的请求才能发向服务端。

所以服务端路由 我们还需要 处理这样一个 请求:

注意:该请求同样需要设置跨域。

处理上传

处理上传的图片引人了multiparty模块,用法很简单:

图片处理

Node处理图片需要引入 gm 模块,它需要用 npm 来安装:

BUG说明

注意:node的图形操作gm模块前使用必须 先安装 imagemagick 和 graphicsmagick,Linux (ubuntu)上使用apt-get 安装:

MacOS上可以用 Homebrew 直接安装:

预设尺寸

有些时候除了原图,我们可能需要把原图等比例缩小作为预览图或者缩略图。这个异步操作还是用Promise来实现:

重命名图片

为了方便排序和管理图片,我们按照 “年月日 + 时间戳 + 尺寸” 来命名图片:

至于图片尺寸 使用 gm的 size() 方法来获取,处理方式如下:

总结

对于大前端的工作,理解图片上传的前后端原理仅仅是浅层的。我们的口号是 “把JavaScript进行到底!”,现在无论是 ReactNative的移动端开发,还是NodeJS的后端开发,前端工程师可以做的工作早已不仅仅是局限于web页面,它已经渗透到了互联网应用层面的方方面面,或许,叫 全栈工程师 更为贴切吧。

标签: node react vue

本文链接地址:https://www.jiuchutong.com/biancheng/380772.html 转载请保留说明!

上一篇:nodejs multer实现文件上传与下载(node javascript)

下一篇:Node.js 异步异常的处理与domain模块解析(node中异步编程模式使用什么捕获异常)

  • 汇算清缴期间发生的计入当期损益吗
  • 会计账簿错弊有哪些
  • 城建税计税依据扣除增值税期末留抵
  • 个体户一定要自己经营吗
  • 怎么看自己公司是一般纳税人还是小规模纳税人
  • 存货的领用
  • 承兑汇票怎么做假
  • 个体工商户个人所得税怎么申报
  • 非居民企业出租境内不动产
  • 自来水差额征税政策
  • 工程保险费属于企业管理费吗
  • 运输费用 成本
  • 对于税收会计记账科目应该如何设置?
  • 哪些税种可以税前扣除
  • 土地证是商业用地
  • 红字发票交税吗
  • 如何区分餐费发票和停车费发票?
  • 未达起征点纳税申报表怎么填
  • 差额征税的差额怎么算
  • 清包工和甲供工区别在哪
  • 餐饮发票忘记作废也没冲红怎么处理?
  • 分期收款所得税收入确认多少
  • 三星笔记本预装系统
  • 预付款后开发票时的摘要和分录怎么做?
  • 进项大于销项会计分录
  • 收到对方公司开的电子专票怎么入账
  • 单位交社保是不是比个人交社保以后退休金要多
  • 所得税时间性差异与永久性有关吗
  • 购销合同印花税计算方法
  • 所有者权益期末减期初等于净利润还是利润总额
  • 零息债券利息
  • 小型微利企业税收优惠2023
  • php控制器是用来做什么的
  • 工资属于收益类科目吗
  • 暂估入库含税还是含税
  • yii2框架漏洞
  • linux 高并发网络编程
  • 长期待摊费用装修费摊销年限
  • 其他综合收益属于什么类
  • 金融资产发生减值的客观证据包括哪些
  • mongodb常用命令
  • 房地产企业将开发产品用于职工福利
  • 网上打印出来的手机买卖协议有效吗
  • 业务活动表本年累计数公式是什么
  • 应付利息增加说明企业什么
  • 纳税人可以享受六项专项附加扣除
  • 一般纳税人账务不健全是否处罚
  • 基建和技改的区别
  • 交通运输服务包括程租
  • 单位食堂账目
  • 费用发票已报销怎么入账
  • 临时售楼部招牌效果图
  • 房屋租赁费怎么记账
  • 招待客户住宿属于什么费用
  • 房租押金不退如何处理
  • mysql优化的几种方法
  • mysql设置唯一值
  • docker镜像包含什么
  • xp系统鼠标设置在哪
  • ubuntu调出命令行
  • 如何关闭win10自带杀毒软件
  • win10病毒与防护
  • windows102021年更新
  • 手机连接电脑win11
  • win10ipv4 ipv6无internet访问权限
  • 基于HTML5和CSS3的响应式Web的设计与实现
  • 怎样从零开始
  • 电脑自动重启命令
  • opengl metal
  • jquery validate表单校验
  • 粉碎文件的快捷键
  • Linux 中的通配符详解及实例
  • javascript命名空间
  • context和getApplicationContext()介绍
  • 删除的照片怎么还原
  • python操作json字符串
  • 三水水厂热线电话号码
  • 税务局服务大厅办办退税要身份证复印件吗
  • 无锡电子税务局怎么修改办税人员信息
  • 如何在河南省社会保障网上平台进行社保基数申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设