位置: 编程技术 - 正文

基于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
  • 企业稳岗返还申请报告模板
  • 小规模纳税人销售自建不动产
  • 滞纳金按年怎么算
  • 附加税减征额怎么做分录
  • 个体工商户年度报告表怎么报
  • 单位支付给职工的一次性补助金怎么入账
  • 固定资产的净值等于
  • 营改增后商场进场费如何缴税?
  • 公关费用明细表
  • 以汽车出资
  • 企业收取的押金要开票吗
  • 个人所得税手续费返还账务处理
  • 接收境外汇款是什么意思
  • 互联网企业交什么保险
  • 小规模纳税人所得税优惠政策2023
  • 多缴税款能否跨年抵扣
  • 进项税额转出的
  • 生产成本属于什么会计要素
  • 小规模纳税人取得专票如何处理
  • 车位销售代理合同
  • 生产成本和制造费用属于存货吗
  • win10开机会自动打开网页
  • 工伤补偿需要缴税吗
  • 招待费报销制度规定
  • 冲未开票收入怎么做分录
  • 无票收入科目
  • window10怎么创建wifi
  • 贷款损失会计处理
  • 民间非营利组织会计制度及操作实务
  • 车间报销办公用品费
  • dghm.exe是什么程序
  • 用彩泥可以做什么食物?
  • 马哈拉施特拉邦人口
  • php获取文件名后缀
  • Laravel 5.5 的自定义验证对象/类示例代码详解
  • 继承 土地
  • 非上市公司股权估值
  • php反射的原理
  • Yii2使用swiftmailer发送邮件的方法
  • vue-router + element-plus实现面包屑导航栏和路由标签栏
  • php二维数组foreach
  • tracet命令
  • vue中动态添加表格
  • python绘制散点图的函数
  • 公司基本户被冻结,其它账户也会被冻吗?
  • Mysql优化之Zabbix分区优化
  • 汇算清缴交税怎么做账务处理
  • 资产处置损益明细表货币资金怎么填
  • PostgreSQL教程(八):索引详解
  • mysql新手教程
  • 业委会究竟在小区起什么作用
  • 加盖发票专用章有效什么意思
  • 去年的招待费做什么科目
  • 利息与资金占用费
  • 专票多少钱
  • 继续教育专项附加扣除可以扣几年
  • 会计怎么做工资单
  • 流动资产合计怎么算
  • MySQL关键字执行顺序
  • 在sp_executesql中使用like字句的方法
  • mysql一闪而退
  • windows提示无法完成更新
  • linux用户空间获取TCP序号
  • u盘安装ubuntu找不到硬盘
  • win8 开机
  • linux系统要求配置
  • WinXP老显示器CRT显示器严重闪屏的修复方法
  • win8显示屏亮度调节
  • windows1020h2更新失败
  • win8系统打开浏览器
  • css调查问卷
  • jquery中选择器有哪些
  • js创建一个对象,里面有属性和方法
  • 快递代缴的关税有税单吗
  • 如何理解计算消费税时的(1
  • 中华人民共和国刑法
  • 可以抵扣的消费税有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设