基于nodeJs express 框架的图片上传和编辑（引用美图编辑工具）上传小示例

唉，由于近期工作中对于新知识的运用相对较少，也导致小码哥少有更新鄙人心得的机会。还望路过的×××们不要抱怨，勿喷，，，，，

本篇文章，是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例，当然，由于项目工期不禁，都是在非工作时间慢慢完成的，导致至今该图片上传功能也未能插入项目中真正的验证最终效果。不过就小码哥感觉，基本思路及基本功能算是完成了。

下面便由小码哥来给×××们稍微讲解改功能的实现过程及其中用到的一些技术等等。

首先，说说NodeJs Express框架的搭建，这个唯一的前提就是需要本地搭建nodeJs的运行环境，此处不讲如何安装nodeJs和配置环境问题，希望有兴趣的同学可以去问度娘，或者直接登录nodeJs官网https://nodejs.org/en/或者中文网http://nodejs.cn/查看里面的开发文档，至于下载安装过程和配置问题，我想也会有×××早就先于小码哥以博文的形式发布了，由于对于nodeJs，小码哥还是半吊子，就不献丑了。

闲话少说，在×××们安装配置好node环境后，可以在本地某盘新建一个工作文件（此处小码哥直接在tomcat环境下的工作目录中创建的文件，便于本地预览）。在文件中直接按住shift键并鼠标单击右键打开“在此处打开命令窗口”（Win7+ 操作系统有该功能)。在里面可以直接在本目录下进行命令操作了。

前提是node环境安装配置好并配置好npm包管理器等，可以直接在命令行键入npm install express -g完成express包的安装，安装好之后，就可以直接键入express -e imgUpLoad(文件名)了。完成之后你会在你的新建的文件夹里看到名字为imgUpLoad的文件夹，之后，打开imgUpLoad文件夹，在里面再次操作打开新的命令窗口，在窗口中键入npm install 你会发现文件中又多了个node_modules的文件，里面都是npm按照imgUpLoad文件夹下的package.json文件帮你自动安装的可能用到的包文件。

完成上述操作后，你就可以在该Express框架下进行代码编写了，该框架中包含的文件如下图：

其中作为前端人员，最重要的文件就是public文件了，里面放置的都是其自动配置好的p_w_picpaths、javascripts、stylesheets等文件，想必都知道里面该放置什么吧？

再一个就是routes文件夹了，里面有个index.js 的文件，是配置接口的代码以及项目中引用到的各种包文件的引用方式。

最后就是views文件夹下的index.ejs文件了，这就相当于平时写项目的时候的index.html文件了。

对了，这里补充一下配置express框架是命令里的 -e 的作用，由于express框架里对代码有两种后缀的形式，分别是.jade和.ejs。由于前一种小码哥也不熟悉，其也是默认安装的一种，所以在这里加上 -e后，可以是生成的代码后缀直接换成ejs了。

上面的框架也搭建好了，下面就直接上代码了：

由于代码文件比较多，一会直接会上传一个附件，大家可以下载下来，按照上面的环境，直接运行一下试试。由于附件过大，上传到51cto下载中心了，有需要可以去那里下载，，，地址：http://down.51cto.com/9301862

里面用到了美图秀秀的图片编辑工具，大家可以直接访问http://open.web.meitu.com/进行查看，并可以依照里面的开发文档进行研究，此处不多赘述了哈！！

尝试的过程中可能会遇到很多问题，不过，只要你安装配置了node环境以及安装配置了npm包管理器。就应该没啥问题。

本文只是小码哥初学node环境下第一个小示例，请大家多多包涵~