位置: 编程技术 - 正文

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

  • 增值税明细账用三栏式还是多栏式
  • 科目错一题扣几分
  • 以前年度费用调减
  • 金蝶kis旗舰版使用手册
  • 生产成本二级科目有工资吗
  • 会计核算的具体流程
  • 土地投资入股是否需要发票作为企业所得税税前扣除凭证
  • 拿到一个材料如何加工
  • 购买车间用的材料怎么做分录
  • 财产税放在哪个科目
  • 自产自销税点
  • 应收账款的周转率怎么算
  • 如果没有预缴就开票会怎样?
  • 企业安排残疾人就业有啥优惠政策
  • 企业所得税能否核定征收
  • 归属于母公司的净利润怎么来的?
  • 股东利润分配预缴税款
  • 固定资产清查盘亏账务处理
  • 企业购买汽车需要缴纳什么税
  • 个体户需要记账嘛
  • 固定资产出售时增值税怎么处理
  • 农民工签订劳务合同的条件
  • 微软笔记本
  • PHP:spl_autoload()的用法_spl函数
  • mac怎么切换输入方式
  • 基本工程建设项目清单
  • 兼职如何交税款
  • 发票开具有误拒收后销售方如何处理?
  • 固定资产清理的累计折旧怎么算
  • php 进程通信
  • 结存材料实际成本分录
  • 社保基数和实际工资怎么算
  • vue3父子传值
  • ai模拟
  • matching path
  • 增值税发票已认证抵扣还可以进项税额转出吗
  • 收支比是收入比还是利润
  • 一般纳税人购进免税农产品如何抵扣进项税额
  • 印刷电机特点
  • 企业所得税外地预缴几个点
  • sklearn实例
  • 哪些属于政府机关单位
  • sqlserver2005安装失败
  • SQL高级应用之同服务器上复制表到另一数据库中并实现去重复
  • 应付职工薪酬的含义
  • 法人向公司借款如何做账
  • 外埠存款主要使用范围
  • 机物料消耗计入什么费用
  • 债券分期付息到期还本的意思
  • 企业实收资本怎么计算
  • 客户从公司借钱怎么拒绝
  • 典当行收房产证吗直接可以拿钱吗
  • 水利建设基金的征税对象
  • 自产的产品作为福利增值税
  • 可供出售金融资产包括哪些内容
  • 拿到营业执照后需要做的事
  • b-树和b+树都能有效地支持随机检索
  • sqlserver数据库中表的类型有哪些
  • 在mysql中使用什么语句来查询数据
  • 数据库查询排名
  • 联想s5s531笔记本M2
  • win10预览版选哪个
  • ubuntu英文系统安装中文输入法
  • .exe是啥程序
  • windows8使用教程
  • win10 20h2 v2
  • 重装win7系统后鼠标键盘不能用
  • synergy linux
  • linux删除sdb1
  • 学习的引子
  • unity小例子
  • opengl es3.0
  • 批处理copy合并文件
  • node断点调试
  • XML、HTML、CSS与JS的区别整理
  • 深入理解新发展理念,推进供给侧结构性改革
  • python编写登录程序
  • First class: UI design for Android
  • 举报电话12345管用吗
  • 苏州吴江区事业单位2023成绩公布
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设