NodeJS Basic tut 11: Upload file trong Node.js
NodeJS Basic tut 11: Upload file trong Node.js
Nguồn : toidicode.com Ở các phần trước mình đã giới thiệu với mọi người khởi tạo một con server và đọc ghi file trong […]
Nguồn : toidicode.com
Ở các phần trước mình đã giới thiệu với mọi người khởi tạo một con server và đọc ghi file trong node.js. Thì ở bài này chúng ta sẽ áp dụng 2 module đó cộng với 1 module nữa (mình sẽ giới thiệu ở dưới) để thực hiện chức năng upload file trong node.js.Mục Lục
1, Tổng Quan.
– Để thực hiện được chức năng này thì mọi người cần phải có các kiến thức sau:
- module http trong node.js (link).
- module fs trong node.js (link).
- module formidable – Đây là một module dùng để phân tích dữ dữ liệu từ form gửi lên, đặc biệt là với tệp tin.
-Module formidable không được tích hợp sẵn vào trong node.js nên để có thể sử dụng được thì các bạn cần phải tải nó về bằng npm.
Cú Pháp:
npm install -s formidable– Ứng dụng chuẩn bị xây dựng của chúng ta sẽ có cấu trúc thư mục như sau:
bashcopy|-node_modules/ |-uploads/ |-index.html |-server.js 2, Viết code upload.
-Đầu tiên thì chúng ta cần viết code để khởi tạo server (ở đây mình sử dụng module http và cho web chạy ở port 8000).
File server.js:
var http = require('http'); http.createServer(function (req, res) { //code }).listen(8000);-Tiếp đó chúng ta cần tạo ra một file chứa code html form (ở đây mình đặt là index.html nằm cùng cấp với file server.js)
Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Upload file in node.js - Toidicode.com</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2" style="margin-top: 50px;"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Toidicode.com</h3> </div> <div class="panel-body"> <form action="upload" method="POST" enctype="multipart/form-data"> <legend>Upload file</legend> <div class="form-group"> <label for="">File</label> <input type="file" class="form-control" name="files"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </div> </body> </html> -Sau khi chúng ta đã tạo xong view rồi, thì việc tiếp tục chúng ta cần làm là dùng module fs để render file view đó ra trên server.
Code:
var http = require('http'); var fs = require('fs'); http.createServer(function (req, res) { //xét header cho request res.writeHead('200', {'Content-Type': 'text/html'}); //Đọc file index và trả về dữ liệu fs.readFile('index.html', 'utf8', function (err, data) { //nếu nỗi thì thông báo if (err) throw err; //không lỗi thì render data res.end(data); }) }).listen(8000); Lúc này chúng ta chạy server lên thì kết quả sẽ được như hình.
-Bây giờ trên file server.js chúng ta sẽ tiếp tục require module formidable vào để viết code xử lý upload.
var http = require('http'); var fs = require('fs'); var formidable = require('formidable'); http.createServer(function (req, res) { //Nếu request là uplooad và method là post if (req.url === '/upload' && req.method.toLowerCase() === 'post') { //Khởi tạo form var form = new formidable.IncomingForm(); //Thiết lập thư mục chứa file trên server form.uploadDir = "uploads/"; //xử lý upload form.parse(req, function (err, fields, file) { //path tmp trên server var path = file.files.path; //thiết lập path mới cho file var newpath = form.uploadDir + file.files.name; fs.rename(path, newpath, function (err) { if (err) throw err; res.end('Upload Thanh cong!'); }); }); return; } //xét header cho request res.writeHead('200', {'Content-Type': 'text/html'}); //Đọc file index và trả về dữ liệu fs.readFile('index.html', 'utf8', function (err, data) { //nếu nỗi thì thông báo if (err) throw err; //không lỗi thì render data res.end(data); }) }).listen(8000); -Lúc này các bạn chạy lại server và hưởng thụ kết quả!
3, Lời kết.
-Phần này mình không nói sâu về formidable module như giới hạn dung lượng của file,… Nếu như các bạn cần thì có thể tham khảo thêm tại link
Post Views:
19
Lượt xem : 252
