基于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文件了,里面放置的都是其自动配置好的images、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环境下第一个小示例,请大家多多包涵~

时间: 2024-10-11 13:17:46

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

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

前提: nodejs >= 10.0;  这里不推荐用官网的yarn安装antd的模块,因为后续会出错,错误如图: 也不推荐用npx方法来搭建react骨架,也会出错,让我们开始吧!!   前端React+Antd框架搭建 1.安装并启动create-react-app骨架应用 打开cmd按顺序执行以下指令: npm install -g create-react-app   (全局安装create-react-app, 默认会安装在C盘个人用户下) create-react-app my-ap

Nodejs Express框架

ctrl + h Nodejs Express框架

C#图片采集软件 自动翻页 自动分类(收集美图必备工具)

网站管理员希望将别人的整站数据下载到自己的网站里或者将别人网站的一些内容保存到自己的服务器上.从内容中抽取相关的字段,发布到自己的网站系统中.有时需要将网页相关的文件也保存到本地,如图片.附件等. 图片采集软件能采集任何网站的各种格式图片,实现把所有文章.新闻.帖子等中间的图片全部有有序列的分类后保存到您的计算机上等功能,可以把任何论坛网站的所有帖子的图片采集到本地,轻松过滤广告等,是网站.论坛站长和喜欢收集美图的朋友的必备工具. 本文演示使用C# WebBrowser控件实现自动识别下一页,按

初入nodeJs express框架

学习nodejs,对于前端人员来说,不懂后台技术,也是不太容易的.当然,nodejs的唯一好处貌似就是其代码编写编译等风格上的JavaScript相同,可以说,其就是通过JavaScript进行后台代码的编写.这对于JavaScript语言来说,有了新的突破和革新(革新有点大了,突破是肯定的)呵呵. 鉴于很多前端人员不懂后台语言,学习nodejs,学会通过nodejs下的开源框架express来搭建完整的项目框架还是很有必要的. express是一个nodejs里的开源框架,在网上可以说前前后后

nodejs express 框架 上传文件

web 项目应用express4.0框架 html 表单post 文件上传失败,后端无法获取提交文件 express不支持文件上传. 方式一 若是图片,可以将图片转码为BASE64上传 前端框架angularjs代码 转换代码如下 $scope.filechange=function(index){ var file = this.files[0]; var url = webkitURL.createObjectURL(file); /* 生成图片 * --------------------

NodeJS:Express 框架实战解析视频教程

一.Node.js是一个Javascript运行环境,简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用. 二.node.js运行原理

基于nodejs+express+mysql+webstorm+html的 增删改查

一.工具准备 Nodejs框架,WebStorm.Mysql服务.Navicat.此篇文章只讲项目的搭建过程,至于Nodejs,WebStorm.Mysql的下载.安装与配置网上资源很多,请自行查阅,本文重点讲述 增删改查,此文为学习笔记,我也是初学者,很多代码没有做过多解释,以免误导他人. Github 地址:https://github.com/Spqin/Nodejs_Websto_Mysql_CRUD 二.打开WebStorm创建项目-项目名称自定义,这里我按年月日做项目名称. 1.选怎

nodeJS express框架 中文乱码解决办法

最近在研究javascript 的服务端应用 node,之所以想要研究node,是因为前几个月一直在前端挣扎,从javascript入门到在项目中实际使用javascript,确实感悟颇深.javascript的书籍看了<javascript权威指南>,这本书确实对javascript的入门很不错,之后看了<JavaScript设计模式与开发实践>,这本书我当做是边学javascript知识,边学一下设计模式,也很不错.废话少说,这几天看了一下nodejs,发现虽然是新的知识,当感

Centos 编译安装nodejs&amp;express框架

一. 下载nodejs 版本 wget http://nodejs.org/dist/v0.10.28/node-v0.10.28.tar.gz 二. 编译安装 cp node-v0.10.28.tar.gz /usr/src/ cd /usr/src tar zxvf node-v0.10.28.tar.gz cd node-v0.10.28/ ./configuration --prefix=/usr/local/node make&make install 设置环境变量 vi /etc/p