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

发布时间:2020-06-11 22:11:47 作者:web郭乐
来源:网络 阅读:802

基于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框架下进行代码编写了,该框架中包含的文件如下图:

基于nodeJs 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基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例


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


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


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

推荐阅读:
  1. Nodejs如何实现图片上传、压缩预览、定时删除功能
  2. 使用nodejs怎么实现一个图片预览和上传功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

express 图片 nodejs

上一篇:通用的jsp动态下拉

下一篇:有关二分查找的边界思考

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》