Upload and edit images based on the Nodejs Express Framework (reference to the beauty Map editing tool) for uploading small samples

650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0031.gif "alt=" J_0031.gif "/> Alas, due to the relatively small use of new knowledge in recent work, it also leads Small size elder brother seldom update my experience of opportunity. Also hope to pass the base friends do not complain, do not spray,,,,,

This article, is based on the NodeJs Express Framework to complete a project in the image upload and edit upload a small example, of course, because the project duration can not help, are in the non-working time slowly completed, resulting in the image upload function has not been inserted into the project to really verify the final effect. However, small-size brother feel, basic ideas and basic functions are completed.

The following is a small brother to give the basic friends a little explanation of the implementation of the function and some of the techniques used in the process and so on.

First of all, to talk about the construction of the NodeJs Express Framework, the only premise is the need to build a local NodeJs operating environment , here does not talk about how to install NodeJs and configuration environment issues, Hope interested students can go to ask Niang, or directly login nodeJs official website https://nodejs.org/en/or Chinese network http://nodejs.cn/view the development document inside, As for the download installation process and configuration issues, I would like to have a friend has already been in small size elder brother in the form of blog post, because for nodeJs, small size elder brother or Dabbler, will not caught dead.

Less gossip, after the base Friends install the node environment, you can create a local disk in a new working file (here, small brother directly in the Tomcat environment of the working directory created files, easy to local preview). hold down the SHIFT key in the file and right-click to open the " Open command Window here " (the win7+ operating system has this feature ). In the inside can be directly in this directory under the command operation.

If the node environment is installed and configured with NPM Package Manager , you can type npm install express-g to complete the Express package installation directly at the command line. Once installed, you can type express-e imgupload (file name) directly. When you're done, you'll see a folder named Imgupload in your new folder, then open the Imgupload folder, open the New command window again, and type npm install in the window. You will find that there is another node_modules file in the file, which is a package file that NPM automatically installs for you according to the Package.json file under the Imgupload folder .

Once you have done this, you can write code in the Express framework that contains files such as:

650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M00/84/0B/wKiom1eEYCHxBcpYAABHwz4ntxU723.png-wh_500x0-wm_3 -wmp_4-s_2689773608.png "title=" Express01.png "alt=" Wkiom1eeychxbcpyaabhwz4ntxu723.png-wh_50 "/>

One of the front-end personnel, the most important file is the public file, which is placed in its automatic configuration of images, javascripts, stylesheets and other files, presumably know what to put inside it?

Another is the routes folder , which has a index.js file, is the code of the Configuration interface and the reference to the various package files referenced in the project.

Finally is the Views folder under the index.ejs file , which is equivalent to the usual writing project when the index.html file.

By the way, here's to add that the Configure Express framework is the role of-e in the command, because there are two suffixes of the code in the Express framework, namely. Jade and. Ejs. Because the former small code elder brother is also unfamiliar, it is also the default installation of one, so add-e here, can be generated code suffix directly replaced by Ejs.

The above frame is also set up, the following is directly on the code:

Because the code file is more, one will directly upload an attachment, you can download down, according to the above environment, directly run a try. Because the attachment is too large, uploaded to the 51cto Download Center, there is a need to go there to download,,, Address: http://down.51cto.com/9301862650) this.width=650; "src=" http// Img.baidu.com/hi/jx2/j_0064.gif "alt=" J_0064.gif "/>

In the use of the United States 美图秀秀 image editing tools, you can directly access the http://open.web.meitu.com/for viewing, and can follow the development of the inside of the document to study, here not more to repeat the ha!!

You may encounter many problems while trying, however, as long as you have configured the node environment and installed the NPM Package Manager. There should be no problem.

This article is just small-size Brother beginner node environment in the first small example, please forgive us ~

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1825667

Upload and edit images based on the Nodejs Express Framework (reference to the beauty Map editing tool) for uploading small samples