Upload Ảnh & Tài Liệu PDF Lên Cloudinary Cực Nhanh!

Bạn đang tìm cách lưu trữ ảnh hoặc PDF mà không làm nặng server? Tính năng upload lên Cloudinary với Express và Node.js sẽ giúp bạn xử lý việc này nhanh gọn chỉ trong vài dòng code!

Tính năng này là gì?

Upload lên Cloudinary là cách sử dụng dịch vụ đám mây để lưu trữ tệp đa phương tiện (ảnh, PDF, video, v.v.) thay vì giữ trên server cục bộ. Với Express và Node.js, bạn có thể tích hợp tính năng này dễ dàng vào ứng dụng web.

Cách hoạt động ra sao?

Cloudinary cung cấp API để upload tệp từ server của bạn. Bạn chỉ cần cài đặt package cloudinary, cấu hình khóa API, và gửi tệp lên bằng một request đơn giản. Ví dụ: người dùng chọn ảnh hoặc PDF từ form HTML, Express xử lý multipart/form-data qua middleware như multer, sau đó tệp được đẩy lên Cloudinary. Kết quả trả về là một URL công khai để sử dụng ngay.

Lợi ích là gì?

Bạn tiết kiệm dung lượng server, tăng tốc độ tải ứng dụng vì tệp được lưu trên đám mây. Cloudinary còn tự động tối ưu hóa ảnh, hỗ trợ resize, crop – cực tiện cho lập trình viên. Chưa kể, việc quản lý tệp trở nên đơn giản hơn bao giờ hết!

Hướng dẫn nhanh

Cài đặt các package cần thiết

1 2	npm i express multer cloudinary streamifier dotenv npm i -D @types/multer @types/streamifier

Tạo file utils/upload.ts với nội dung

Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Request, Response } from 'express'
import streamifier from 'streamifier'
import multer from 'multer'
import { v2 as cloudinary } from 'cloudinary'
import { CLOUDINARY_API_KEY, CLOUDINARY_CLOUD_NAME, CLOUDINARY_SECRET_KEY } from '../config'

cloudinary.config({
  cloud_name: CLOUDINARY_CLOUD_NAME,
  api_key: CLOUDINARY_API_KEY,
  api_secret: CLOUDINARY_SECRET_KEY
})

const storage = multer.memoryStorage()
const upload = multer({ storage })
export const uploadMiddleware = upload.single('file')

export function useMiddleware(fn: any) {
  return (req: Request, res: Response) => {
    return new Promise((resolve, reject) => {
      fn(req, res, (result: any) => {
        if (result instanceof Error) {
          return reject(result)
        }
        resolve(result)
      })
    })
  }
}

export async function uploadToCloudinary(fileBuffer: Buffer, options: any) {
  return new Promise((resolve, reject) => {
    const stream = cloudinary.uploader.upload_stream(options, (error, result) => {
      if (error) return reject(error)
      resolve(result)
    })
    streamifier.createReadStream(fileBuffer).pipe(stream)
  })
}

Truy cập vào Cloudinary để lấy CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_SECRET_KEY

Tạo file controllers/UploadController.ts

import { NextFunction, Request, Response } from 'express'

import { uploadMiddleware, uploadToCloudinary, useMiddleware } from '../utils/upload'

export async function handleUpload(req: Request, res: Response, next: NextFunction) {

try {

await useMiddleware(uploadMiddleware)(req, res)

if (!req.file) {

return res.status(400).json({

success: false,

message: 'No file uploaded'

})

}

const options = {

folder: req.body.folder || 'storage',

width: parseInt(req.body.width || (req.query.width as string)) || 800,

height: parseInt(req.body.height || (req.query.height as string)) || 600,

crop: req.body.crop || 'limit'

}

const result = await uploadToCloudinary(req.file.buffer, options)

res.status(200).json({

success: true,

message: 'Uploaded!',

data: result

})

} catch (error) {

next(error)

}

export const UploadController = {

handleUpload

}

Tạo file rest/upload.rest để gửi request với REST Client extension

### Upload file

POST http://localhost:3000/api/upload/public

Content-Type: multipart/form-data; boundary=boundary

--boundary

Content-Disposition: form-data; name="file"; filename="cloudinary.png"

Content-Type: image/jpeg

< ./public/cloudinary.png

--boundary--

### Upload pdf

POST http://localhost:3000/api/upload/public

Content-Type: multipart/form-data; boundary=boundary

--boundary

Content-Disposition: form-data; name="file"; filename="genrated_pdf.pdf"

Content-Type: application/pdf

< ./public/generated_pdf.pdf

--boundary--

Sau khi upload kết quả trả về như ảnh

Lưu ý

Khi upload file pdf cần check options như hình để có thể truy cập file pdf thông qua url trả về