神刀安全网

React+Koa实现图片和文件上传

前段时间由于自身原因没有把文章写起来,后续会克服一些个人原因继续把自己在全栈开发道路上的一些心得分享给大家。今天写的是这个我最近写的一个上传文件的demo。东西不多适合初初接触React和Node的人。好了废话不多说直接开始步入正题。

简介

1.React

React是FaceBook在2013年发布的一个js框架,因为该公司对市面上所有的js mvc框架都不太满意,所以自己动手写了一个。React-Native是由React演变而来

2.Koa

koa是新出的一个node.js框架。koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。

初始化

搭建React环境,需要首先配置webpack。本公众号之前已经有写过如何搭建简单的webpack,足够你开发调试使用。如果不想自己搭建webpack,Facebook官方也推出了cli搭建,具体的点这里。这篇教程默认你已经搭建好React相关工程。

关于koa的话,请先移步koa官网。搭建koa相对来说比较简单。因为文档里也有说过,koa非常轻,自己本身没有绑定任何中间件。在使用koa之前,需要对ES6的Generator和co有一定的了解。不了解的可以参考阮一峰老师的ECMAScript6入门

开始

前端

首先我们来说一下React部分,我们需要搭建一个这样的UI。

React+Koa实现图片和文件上传

可以选择图片,也可以拖动图片进入。

当图片拖入以后,显示图片的信息。

React+Koa实现图片和文件上传

点击确认上传图片后,在上传成功后服务端返回图片地址,在前端予以显示

React+Koa实现图片和文件上传

最后,点击查看从服务端获取该图片在前端显示

React+Koa实现图片和文件上传

关于UI具体的代码就不在这里说明,本人已经将代码上传到github,想要看完整源码的可以戳这里!下面主要挑着关于业务的代码说明

React+Koa实现图片和文件上传

选择完文件以后,在设置的钩子函数里面我们可以获取到这个文件对象。当你上传的是多个文件的时候,这里的files并不是一个数组,我们需要把它转换成数组。传统的方式用call将参数绑定到slice方法的this中,ES6可以用Array.from。具体的大家可以自行尝试。这里我们利用filter函数将图片筛选出来,如果需要上传文件的话则不必这一步。这里我们用正则筛选出图片,并且添加到this.state.files数组里。

下面是上传文件的方法,这里我使用ajax。我们用FormData来生成上传的数据。当数据上传成功以后,在服务端我们会返回当前上传图片的url。

React+Koa实现图片和文件上传

当然我们也可以不用引入JQuery,使用XMLHttpRequest

React+Koa实现图片和文件上传

上传成功后,服务端下发图片的url,我们通过setState让render重新渲染。

在render中我们写好以下函数。当有图片的时候,显示图片并且显示上传按钮。当图片上传成功以后,我们显示上传成功以后的地址及查看图片的按钮

React+Koa实现图片和文件上传

到此前端的工作基本完成,现在我们来搭建服务器。

服务端

用过Express的都知道,Express的通病是那一层有一层的回调嵌套。Koa很好的解决了这个问题,先来看一个最基础的Koa代码。

React+Koa实现图片和文件上传

首先我们先要安装koa,命令行运行npm install koa –save。这里写了两个koa的中间件,我们来看一下中间件的调用顺序。这里需要注意用iojs或者node>0.11.16病开启–harmoney来运行。这里我们已经下载好了io.js。在命令行,我们用iojs运行app。可以看到输出了Server listening on:4000,说明服务器正常启动,这时候我们的服务器已经启动。然后开启另外一个命令行窗口,我们用curl请求http://localhost:4000。然后输出如下

React+Koa实现图片和文件上传

可以看到koa的执行顺序,koa首先顺序执行。当遇到yield next的时候,会跳到下一个中间件,执行里面的代码。当yield next捕获不到任何中间件的时候,则逆序返回,把未执行的代码执行。

下面我们来说明这个简单程序将会用到的中间件。

koa-frouter:将路由以指定文件目录的形式表现。

koa-bodyparser:解析post请求的body。

co-busboy:解析multipart请求体。(这里简单理解为前端使用FormData上传数据,后端需要用这个中间件来解析)

koa-static:指定静态资源的位置。

fs:读写文件。

koa-cors:跨域请求支持

path:生成路径。

好了,大概就用到这么多,简单吧——。把上面的库一个一个安完以后,下面我们开始敲代码。

先把工程目录建好。我建完以后是这样的,bin和test当前项目可以省略

React+Koa实现图片和文件上传

首先我们打开app.js,键入如下代码

React+Koa实现图片和文件上传

然后打开upload.js

React+Koa实现图片和文件上传

这里我们用co-busboy把请求解析为generator对象,然后通过循环yield获取到返回的文件流对象。通过path生成static文件夹在主机的绝对路径,然后把文件流写入指定位置。存储成功以后,我们返回当前图片的url。怎么样,是不是感觉too simple?这里需要注意的是,如果part不是文件流对象,是没有pipe方法的,所以在这里我们需要判断一下,这个就留个大家来完成吧。

好了至此我们的小程序基本完工,当然很有很多细节需要注意。现在运行服务器,然后我们在前端选择一张图片,点击上传。怎么样,你得static文件夹下是不是多了几个文件呢?

还是一如既往的打一下小广告,源码已经上传github,想要下载的可以点这里。另外之前一直有童鞋跟我要React-Native ListView的源码,别着急,过几天等我整理好了会发布到github哟。

如果你也喜欢全栈,请关注React全栈开发吧!

React+Koa实现图片和文件上传

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React+Koa实现图片和文件上传

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址