Upload Ảnh Lên ImgBB và Lấy URL Bằng JavaScript

1. Tạo tài khoản ImgBB:

👉 Truy cập trang ImgBB và đăng ký một tài khoản nếu bạn chưa có.

👉 Vào API Key và lấy mã API của bạn (API key).

2. Viết code JavaScript để tải hình ảnh:

Sử dụng Fetch:

const apiKey = "YOUR_CLIENT_API_KEY";

async function uploadImgBB(file) {
  const formData = new FormData();
  // Thêm file hình ảnh vào FormData để gửi lên server
  formData.append("image", file);

  try {
    // Gửi yêu cầu POST đến API ImgBB với đường dẫn endpoint và apiKey
    const response = await fetch(`https://api.imgbb.com/1/upload?key=${apiKey}`, {
      method: "POST", // Phương thức POST để tải file lên
      body: formData, // Dữ liệu gửi đi là FormData chứa file ảnh
    });

    // Chuyển đổi phản hồi từ dạng JSON thành object JavaScript
    const data = await response.json();

    // Trả về URL của hình ảnh sau khi tải lên thành công
    return data.data.url;
  } catch (error) {
    // Bắt lỗi nếu có vấn đề xảy ra trong quá trình tải lên
    console.log(error);
    return null; // Trả về null nếu gặp lỗi
  }
}

Sử dụng Axios:

const apiKey = "YOUR_CLIENT_API_KEY";

async function uploadImgBB(file) {
  const formData = new FormData();
  // Thêm file hình ảnh vào FormData để gửi lên server
  formData.append("image", file);

  try {
    // Gửi yêu cầu POST đến API ImgBB với đường dẫn endpoint và apiKey bằng axios
    const response = await axios.post(
      `https://api.imgbb.com/1/upload?key=${apiKey}`,
      formData
    );

    // Trả về URL của hình ảnh sau khi tải lên thành công
    return response.data.data.url;
  } catch (error) {
    // Bắt lỗi nếu có vấn đề xảy ra trong quá trình tải lên
    console.log(error);
    return null; // Trả về null nếu gặp lỗi
  }
}