Video học lập trình mỗi ngày

Upload files using multer in nodejs. Ở bài trước tôi đã show một demo nho về bài viết upload files với formidable trong nodejs và express. Và hôm nay để tiếp tục giúp các bạn giải quyết về vấn đề upload file thì tôi sẽ demo cho các bạn một cách nữa đó là upload file với multer. Một trong những thư viện giúp handling multipart/form-data rất phổ biến. 

Nếu như bạn nào chưa đọc qua bài viết trước thì theo tôi nên quay lại bài "Upload files using formidable with nodejs". Để so sánh những ưu và nhược điểm của những thư viện hỗ trợ upload trong nodejs. Đừng bỏ qua những bài như thế, vì ở lập trình viên hơn nhau là chỗ tìm tòi và học được nhiều cách để áp dụng cho mỗi trường hợp. Upload files using formidable in nodejs 

Source code Upload file Mutler nodejs: Get Code On Github

Và bây giờ chúng ta sẽ đi qua một middleware rất phổ biến khác có tên là Multer để xử lý upload một hoặc nhiều files với Express và Node.js. Và thư mục chứa upload sẽ là một folder trong local chúng ta. Và bài sau tôi sẽ hướng dẫn các bạn kết hợp giữa Multer, Nodejs để upload lên cloudinary, một hosting rất ngon và mạnh mẽ trong việc storage file. Tất nhiên là có cnd và compress size miễn phí. Ok, và bây giờ chúng ta cũng nhau tìm hiểu thư viện Mutler. 

Multer là gì? What's Multer? 

Nói cho oai vậy thôi chứ thật ra như tiêu đề chúng ta đã nói rồi. Như tôi đã nói trước đó, Multer là một middleware giúp Express để xử lý các yêu cầu multipart/form-data.

Khi người dùng upload files lên server của chúng ta, trình duyệt sẽ tự động mã hóa yêu cầu dưới dạng kiểu multipart/form-data. Multer giúp dễ dàng xử lý một yêu cầu như vậy trên máy chủ. 

Cách sử dụng upload file với Multer trong nodejs

Cơ bản trên client là thế này 

Html

<form action="/uploadSingle" method="post" enctype="multipart/form-data">  
      <input type="file" name="name" />
</form>

 notes: đừng quên enctype là multipart/form-data. nếu không chúng ta sẽ không get được những field name khi submit xuống nodejs. 

Server nodejs 

Tôi sẽ viết một cấu trúc chuẩn của một api nodejs để cho các bạn mới sẽ dựa theo cấu trúc đó là phát triển thêm. Tôi đã chụp hình của cấu trúc một api nodejs mà tôi vừa tạo ra. 

Trong đó: folder api có 

- controller 
      + ControllerUpload 
- models 
     + ModelMulter 

Routes app index.js

Multer Single File Upload with Express and Node JS 

app.js 

const express = require('express');
const logger = require('morgan');

// Define port for app to listen on
const port =  process.env.PORT || 8080;

/* ==================================================== */
/* ===== Section 2: Configure express middlewares ===== */
/* ==================================================== */

const app =  express();

/* ==================================== */
/* ===== Section 3: Making Routes ===== */
/* ==================================== */

// set routes
require('./routes')(app) //importing route

//nếu dự án của bạn có nhiều người thì có thể set thêm
//require('./routes/user01')(app)

// To make the server live
app.listen(port, () => {
console.log(`App is live on port ${port}`);
});

Handling File Uploads

Routes/index.js 

File này là set routes nếu dự án của bạn có nhiều người tham gia

'use strict';
const ControllerUpload = require('../app/controllers/ControllerUpload');
//khai báo middleware multer ở đây
const uploadMulter = require('../app/models/ModelMulter')
module.exports = function(app) {
    //upload single ví dụ như avatar...
    app.route('/uploadSingle').post(uploadMulter.single('name'), ControllerUpload.uploadSingleFile);
    //upload nhiều files ví dụ như hình ảnh của sản phẩm
    app.route('/uploadMultiple').post(uploadMulter.any(), ControllerUpload.uploadMultipleFiles);
}

app/controllers/ControllerUpload.js

'use strict';
var self = module.exports = {
      uploadSingleFile: async(req, res) => {
          res.json(req.file)
      },
      uploadMultipleFiles: async(req, res) => {
          res.json(req.files)
      },

}

Multer Storage

app/models/ModelMulter.js

var multer = require('multer');
const path =require('path')
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        
        cb(null, './uploads/'); //hỉnh ảnh sẽ chưa trong folder uploads
       
    },
    filename: (req, file, cb) => {
        cb(null , file.originalname); ;// mặc định sẽ save name của hình ảnh
        // là name gốc, chúng ta có thể rename nó.  
    }
})

var upload = multer({storage:storage}); //save trên local của server khi dùng multer

module.exports = upload;

Như vậy tôi đã thiết lập xong một api đơn giản cho việc upload file using Multer trong nodejs Start node lên:

node app.js

Đây là kết quả tôi dùng postman.

Postman Upload single file Multer in nodejs

Postman Upload Multiple file Multer in nodejs

các bạn có thể lấy code trên github mà tôi đã up lên đó về và test luôn. Show img 

Source code Upload file Mutler nodejs: Get Code On Github

Đây là cách để upload file lên local dùng multer nhưng ở bài sau tôi sẽ hướng dẫn cho các bạn các upload lên hosting Cloudinary, sử dụng Multer một cách hoàn hảo. 

Nếu các bạn cảm thấy bài viết có ý nghĩa, vui lòng chia sẻ bài viết ra rộng rãi, để giúp mọi người hiểu thêm về upload file trong nodejs.
Cảm ơn các bạn đã đọc bài!!