位置: 编程技术 - 正文

基于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中异步编程模式使用什么捕获异常)

  • 总分公司企业所得税合并申报
  • 金税盘年费能全额抵扣吗
  • 房产税和土地使用税每年都要交吗
  • 增值税认证勾选平台
  • 公司收到待报解预算收入退的款是什么
  • 税务申报差额征收 服务减除清单
  • 应纳税所得额为什么要减去60000
  • 自主研发全流程
  • 公司制度奖励怎么写
  • 周转材料租赁费怎么结转成本
  • 企业向个人借款需要交印花税吗
  • 建筑业购买车辆怎么入账
  • 增值税发票退票时间
  • 消防增值服务
  • 不容忽视的近义词
  • 小微企业声明函怎么开
  • 机械租赁费如何入账科目
  • 营改增账务处理实例
  • 软件企业研发费用占比要求
  • 资产评估入账的评估报告
  • 企业所得表怎么填写
  • 退休返聘人员工伤怎么赔偿
  • 滞留海关发票是谁开
  • 培训机构的收入有哪几方面
  • win10新建文件夹快捷键ctrl加什么
  • 如何冲减其他应付款又不影响银行存款
  • 股东不用上班吗
  • win7 excel
  • 增值税发票开红字发票后账务处理
  • php变量用什么符号
  • 卡洛里山脉
  • 微信小程序解决跨域问题
  • laravel批量insert
  • linux查看ssh服务开启
  • 建筑 营改增
  • 厂房维修费是制造费用还是管理费用
  • 难以置信含义
  • 前端 教程
  • 后处理作用
  • 20分钟,使用Amazon SageMaker快速搭建属于自己的AIGC应用
  • umount命令详解
  • php如何遍历二维数组
  • 母子公司之间的租赁房屋
  • 个体工商户开税户
  • 出差费算什么科目
  • 报销备用金的摘要
  • pytest conftest
  • 一个人失恋了该怎么安慰她
  • 学习笔记——Django项目的删除数据、查询数据(filter、get、exclude)
  • 购买方销项负数发票怎么抵扣
  • 企业固定资产如何查询
  • 衍生工具什么意思
  • 资产减值损失科目
  • 现金日记账支出写借方还是贷方
  • 工程维修款是从工程款中扣除吗
  • 房地产企业如何结转成本
  • 企业红包是什么骗局吗
  • 免税收入包括哪些项目
  • 劳动就业失业金怎么申请
  • 变卖固定资产怎么交税
  • xp系统怎么连接电脑
  • ubuntu ftp服务开启
  • mac的qq缓存在哪里怎么打开
  • bios是什么怎么设置
  • hadoop开发环境linux集群的安装步骤
  • qtask.exe - qtask是什么进程 有什么用
  • load its core dll
  • w7开机界面
  • node copyfile
  • jquery prompt
  • python 异步操作
  • unity如何成一组
  • Python函数中仅允许有一条return语句
  • python序列结构总结
  • 迭代 python
  • js图片预览
  • 北京市国家税务网
  • 济南代理报税
  • 广东省税务机关规定小额零售需开发票吗
  • 科技公司小规模纳税人与一般纳税人区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设