Node. js development from scratch (7)-upload images and display images

Source: Internet
Author: User
The examples in the previous tutorial can be separated from the nodejs directory dependency, that is, they can be executed at any location. The examples and compiling environments in this section must be placed under the nodejs directory, this is because the path is involved. To install an external module, we first need to install an external module, which is FelixGei... SyntaxHighlighter. all ();

The examples in the previous tutorial can be separated from the nodejs directory dependency, that is, they can be executed at any location. The examples and compiling environments in this section must be placed under the nodejs directory, this is because the path is involved.

Install external modules
First, we need to install an external module, which is Felix Geisend? Node-formidable module developed by rfer. It abstracts the parsed file data. In fact, to put it bluntly, processing file uploads is "processing POST data"-but the trouble is that it is more appropriate to deal with specific details.

To use this module, you must first install it. Node. js has its own package manager called NPM. It makes it easy to install external modules of Node. js. Run the following command to install the module:

 

1. Install nodejs first

Cd C: \ Program Files (x86) \ nodejs

2. Download Module

Npm install formidable

Note: to install an external module, you must enter the root directory of nodejs to execute the npm command.

Reference external Module
Now we can use the formidable module. The external module is similar to the internal module. Use the require statement to introduce it:

Var formidable = require ("formidable ");
In this module, the form submitted through the http post request can be parsed in Node. js. What we need to do is create a new IncomingForm, which is an abstract representation of the submitted form. After that, we can use it to parse the request object and obtain the required data fields in the form.
Note: To reference formidable, you must put your project in the nodejs installation directory. Otherwise, the following error may occur.


RequestHandlers Module
Applications need new components, so adding new modules does not need to be new. Create a module called requestHandlers, add a placeholder function for each request handler, and then export these functions as modules:

RequestHandlers. js

[Javascript]
Var querystring = require ("querystring "),
Fs = require ("fs "),
Formidable = require ("formidable ");
 
Function start (response ){
Console. log ("Request handler 'start' was called .");
 
Var body =''+
''+
' '+
''+
''+
''+
''+
'';
 
Response. writeHead (200, {"Content-Type": "text/html "});
Response. write (body );
Response. end ();
}
 
Function upload (response, request ){
Console. log ("Request handler 'upload' was called .");
 
Var form = new formidable. IncomingForm ();
Console. log ("about to parse ");
Form. parse (request, function (error, fields, files ){
Console. log ("parsing done ");
Console. log (files. upload. path );
// Fs. renameSync (files. upload. path, "/tmp/test.png"); this will report an error, which should be the path of linux
Fs. renameSync (files. upload. path, "./upload/test.png"); // path Recognized by winodw, nodejs installation path
// Fs. renameSync (files. upload. path, "d:/tmp/test.png"); this also reports an error
Response. writeHead (200, {"Content-Type": "text/html "});
Response. write ("received image:
");
Response. write ("");
Response. end ();
});
}
 
Function show (response ){
Console. log ("Request handler 'show 'was called .");
// The Path Recognized by winodw and the nodejs installation path
Fs. readFile ("./upload/test.png", "binary", function (error, file ){
If (error ){
Response. writeHead (500, {"Content-Type": "text/plain "});
Response. write (error + "\ n ");
Response. end ();
} Else {
Response. writeHead (200, {"Content-Type": "image/png "});
Response. write (file, "binary ");
Response. end ();
}
});
}
 
Exports. start = start;
Exports. upload = upload;
Exports. show = show;
Router Module
Check whether the request handler corresponding to the specified path exists. If yes, call the corresponding function directly.
Router. js

[Javascript]
Function route (handle, pathname, response, request ){
Console. log ("About to route a request for" + pathname );
If (typeof handle [pathname] === 'function '){
Handle [pathname] (response, request );
} Else {
Console. log ("No request handler found for" + pathname );
Response. writeHead (404, {"Content-Type": "text/html "});
Response. write ("404 Not found ");
Response. end ();
}
}
 
Exports. route = route;
Server Module
Request Processing Module

Server. js
[Javascript]
Var http = require ("http ");
Var url = require ("url ");
 
Function start (route, handle ){
Function onRequest (request, response ){
Var pathname = url. parse (request. url). pathname;
Console. log ("Request for" + pathname + "received .");
Route (handle, pathname, response, request );
}
 
Http. createServer (onRequest). listen (8888 );
Console. log ("Server has started .");
}
 
Exports. start = start;

Index module
Startup module, main module

Index. js

[Javascript]
Var server = require ("./server ");
Var router = require ("./router ");
Var requestHandlers = require ("./requestHandlers ");
 
Var handle = {}
// Case sensitive
Handle ["/"] = requestHandlers. start;
Handle ["/start"] = requestHandlers. start;
Handle ["/upload"] = requestHandlers. upload;
Handle ["/show"] = requestHandlers. show;
 
Server. start (router. route, handle );
Effect after running
If you start the application (node index. js, always remember this command line), and then request a URL. The request is http: // localhost: 8888/. After the uploaded file is submitted, the image is displayed on the page, and the file exists on the hard disk.


Files on Hard Disk

 

Result of nodejs execution


Result displayed in the browser

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.