Cách tốt nhất để lưu trữ hình ảnh trong ứng dụng web ngăn xếp MERN

Một tùy chọn là tải hình ảnh lên Cloudinary ở phía máy khách và lưu URL trả về vào MongoDB bằng API của riêng bạn. Cloudinary không chỉ lưu trữ hình ảnh của bạn mà còn xử lý thao tác và tối ưu hóa hình ảnh và hơn thế nữa.

Về cơ bản những gì bạn sẽ phải làm là:

1. Đăng ký tài khoản Cloudinary
2. Đi tới Cài đặt -> Tải lên
3. Thêm "cài đặt trước tải lên" với "Chế độ chưa ký" để cho phép tải lên chưa ký lên Cloudinary

Sau đó, chức năng tải lên của bạn có thể giống như sau:

async function uploadImage(file) { // file from <input type="file"> 
  const data = new FormData();
  data.append("file", file);
  data.append("upload_preset", NAME_OF_UPLOAD_PRESET);

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
    {
      method: "POST",
      body: data,
    }
  );
  const img = await res.json();
  // Post `img.secure_url` to your server and save to MongoDB
}