13. Tao project upload nhieu file voi Multer

Một số trang web cần hiển thị nhiều ảnh Ví dụ số trang cần upload nhiều ảnh Project thực tế với Multer MongoDB A Làm backend cho phần upload nhiều ảnh lúc B Lưu ảnh vào MongoDB C Có thể xem ảnh cách lấy từ csdl xuất Các bước thực sau Tạo trang web có giao diện để upload nhiều ảnh lúc (ta dùng dropzone) https://gitlab.com/meno/dropzone, https://www.dropzonejs.com/ Xử lý phần upload lưu vào thư mục ta quy định (dropzone+multer) Lưu đường dẫn/tên ảnh vào mảng (vì nhiều ảnh nơi), sau đẩy mảng vào mongodb để lưu trữ Tạo trang xem ảnh upload Có chức cho xóa Setup Multer Xử lý phần upload Tạo project ✓express uploadnhieuanh -e ✓cd uploadnhieuanh ✓npm install Cài dropzone ✓npm install dropzone ✓Sau vào thư mục node_modules, copy dropzone.css dropzone.js vào thư mục public (hoặc thiết lập dẫn static file app.js) Cài multer ✓npm install multer Tạo trang upload (index.ejs): dựa vào tài liệu hướng dẫn Xử lý upload nhiều file phía front end • Bước 1: gộp css, js dropzone vào index.ejs • Bước 2: thêm form với class=“dropzone” vào dùng • Bước 3: tạo thêm router /uploadfile index.js để upload lên không bị cảnh báo đỏ router.post('/uploadfile', function(req, res, next) { }); Xử lý upload phía server (backend) • Vào router index.js cài đặt multer để dùng var multer = require( ) • Tạo storage var storage = thư mục tạo multer.diskStorage({ cấp với public, destination: function (req, tạo public ta cần file, cb) { ghi /public/anhsanpham cb(null, './anhsanpham') }, filename: function (req, file, cb) { cb(null, Date.now() + '-' + file originalname) } }) router • Thêm upload vào router.post('/uploadfile',upload.any(), function(req, res, next) { var upload = multer({ storage: res.status(200).send(req.files); storage }) }); Chuẩn hóa liệu upload dạng mảng Mục tiêu cần lưu hết ảnh vào mảng Các thông tin file upload lên req.files, ta sử dụng thuộc tính filename path để lấy tên file/đường dẫn upload lưu vào mảng, ta dùng console.log để xem trước router.post('/uploadfile',upload.any(), function(req, res, next) { console.log(req.files[0].filename); console.log(req.files[0].path); }); Khai báo biến mảng, ví dụ: var anhs = [ ]; Lưu đường dẫn vào mảng anhs lệnh push: anhs.push(req.files[0].path) var anhs=[]; router.post('/uploadfile',upload.any(), function(req, res, next) { var tmp = req.files[0].path; anhs.push(tmp); }); Xử lý form view Mảng anhs lưu thông tin đường dẫn ảnh upload form riêng Các thông tin khác lại nằm Form riêng router.post('/uploadfile',upload.any(), function(req, res, next) { var tmp = req.files[0].path; anhs.push(tmp); }); Hai form riêng biệt khơng có lồng vào router.post('/upsanpham', function(req, res, next) { res.send('Thanh cong'); }); Xử lý form view • Ta chỉnh lại router để biết kết xuất có lấy liệu từ form hay không router.post('/upsanpham', function(req, res, next) { var ten=req.body.ten, gia=req.body.gia; console.log(ten) console.log(gia) console.log(anhs) res.send('Thanh cong'); }); Phân tích tạo liệu sản phẩm Vào mongodb tạo liệu sau Tạo model Mongoose • Bước 1: khai báo sử dụng thư viện mongoose router Tên csdl tạo bên mongodb const mongoose = require('mongoose’); mongoose.connect( 'mongodb://localhost:27017/sanpham', {useNewUrlParser: true} ); • Bước 2: tạo schema ứng với collection uploadsp csdl sanpham, tạo thư mục model project file uploadsp.js với nội dung sau var mongoose = require('mongoose'); var Sanpham = new mongoose.Schema({ ten: {type:String}, gia: {type:Number}, anh: {type:Array} },{collection:'uploadsp'}); module.exports = mongoose.model("uploadsp",Sanpham); Thêm liệu vào sở liệu Vào router khai báo model định nghĩa đem qua dùng var uploadspModel = require(' /model/uploadsp’); Tạo đối tượng để insert vào csdl router.post('/upsanpham', function(req, res, next) { var ten = req.body.ten, gia = req.body.gia ; // dinh nghia mot doi tuong de insert var motdoituong = {"ten":ten,"gia":gia,"anh":anhs } var dulieu = new uploadspModel(motdoituong); dulieu.save() ; res.send('thanhcong’); }); Đổ liệu từ mongodb view • Tạo router để xem liệu router.get('/xemsp', function(req, res, next) { // su dung mongoose lay du lieu va đổ liệu xemsp.ejs uploadspModel.find({},function(error,dulieu){ console.log(dulieu); res.render('xemsp', { data: dulieu }); }) xemsp.ejs });

Hoàn thiện ứng dụng • Vì thư mục chứa ảnh sản phẩm không nằm thư mục public nên ta cần định nghĩa thêm đường static phép truy nhập để view xemsp.ejs hiển thị ảnh, nên ta vào file app.js, thêm đường dẫn sau app.use('/anhsanpham', express.static('anhsanpham'));

... action="/uploadfile" class="dropzone"> • Bước 3: tạo thêm router /uploadfile index.js để upload lên không bị cảnh báo đỏ router.post('/uploadfile', function(req, res, next) { }); Xử lý upload. .. }, filename: function (req, file, cb) { cb(null, Date.now() + '-' + file originalname) } }) router • Thêm upload vào router.post('/uploadfile' ,upload. any(), function(req, res, next) { var upload. .. tính filename path để lấy tên file/ đường dẫn upload lưu vào mảng, ta dùng console.log để xem trước router.post('/uploadfile' ,upload. any(), function(req, res, next) { console.log(req.files[0].filename);