/ / Cách tải hình ảnh lên bộ lưu trữ Supabase từ ứng dụng Next.js

Cách tải hình ảnh lên bộ lưu trữ Supabase từ ứng dụng Next.js

supabase storage

Lưu trữ hình ảnh trong cơ sở dữ liệu thường không được khuyến nghị. Làm như vậy có thể nhanh chóng trở nên đắt đỏ do lượng bộ nhớ và sức mạnh xử lý cần thiết. Sử dụng dịch vụ lưu trữ hiệu quả về chi phí và có thể mở rộng như lưu trữ Supabase sẽ tốt hơn.


Dưới đây, bạn sẽ tìm hiểu cách tải hình ảnh lên bộ chứa lưu trữ bằng cách sử dụng thư viện máy khách Supabase JavaScript và cách phân phát hình ảnh trong ứng dụng Next.js.


Tạo một dự án Supabase

Nếu bạn chưa có sẵn ứng dụng Next.js, hãy làm theo hướng dẫn bắt đầu sử dụng Next.js chính thức để tạo ứng dụng của bạn.

Khi bạn đã hoàn thành việc đó, hãy làm theo các bước sau để tạo cơ sở dữ liệu Supabase:

  1. Điều hướng đến trang web Supabase và tạo một tài khoản mới. Nếu bạn đã có tài khoản, đăng nhập.
  2. Từ bảng điều khiển Supabase, nhấp vào Tạo một dự án mới cái nút.
  3. Đặt tên cho dự án của bạn và nhấp vào nút Tạo dự án cái nút. Sau khi Supabase tạo dự án, nó sẽ chuyển hướng bạn đến bảng điều khiển dự án

Sau khi tạo dự án, tạo thùng lưu trữ.

Tạo một thùng lưu trữ Supabase

Bộ chứa lưu trữ cho phép bạn lưu trữ các tệp phương tiện như hình ảnh và video. Trong Supabase, bạn có thể tạo bộ chứa lưu trữ trên bảng điều khiển hoặc sử dụng thư viện máy khách.

Để sử dụng bảng điều khiển, hãy làm theo các bước sau:

  1. Truy cập trang Lưu trữ Supabase trong Bảng điều khiển.
  2. Nhấp chuột thùng mới và nhập tên cho thùng. Bạn có thể đặt tên cho nó là hình ảnh vì bạn sẽ lưu trữ hình ảnh trong đó.
  3. Nhấp chuột Tạo nhóm.

Tiếp theo, bạn sẽ thiết lập ứng dụng khách Supabase trong ứng dụng của mình để tương tác với bộ chứa.

Thiết lập ứng dụng khách Supabase

Bắt đầu bằng cách cài đặt thư viện máy khách supabase-js qua thiết bị đầu cuối:

 npm install @supabase/supabase-js

Sau đó, tạo một thư mục mới có tên lib ở thư mục gốc của ứng dụng của bạn hoặc trong thư mục src nếu bạn đang sử dụng nó. Trong thư mục này, thêm một tệp mới có tên supabase.js và sử dụng đoạn mã sau để khởi tạo ứng dụng khách Supabase.

 import { createClient } from '@supabase/supabase-js'
export const supabase = createClient('<project_url>', '<your-anon-key>')

Thay thế URL dự án và khóa anon bằng thông tin chi tiết của riêng bạn mà bạn có thể tìm thấy trong cài đặt dự án Supabase. Bạn có thể sao chép các chi tiết trong tệp .env và tham khảo chúng từ đó.

 SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Bây giờ, trong supabase.js, bạn nên có:

 export const supabase = createClient(
  process.env.SUPABASE_PROJECT_URL,
  process.env.SUPABASE_ANON_KEY
);

Khi bạn đã hoàn thành việc đó, hãy tạo biểu mẫu chấp nhận hình ảnh.

Tạo một biểu mẫu chấp nhận hình ảnh

Bên trong thư mục ứng dụng Next.js của ứng dụng của bạn, hãy tạo một thư mục con có tên tải lên và thêm một tệp mới có tên trang.js. Thao tác này sẽ tạo một trang mới có sẵn tại /upload route. Nếu bạn đang sử dụng Next.js 12, hãy tạo upload.js trong trang thư mục.

Trong trang tải lên, thêm đoạn mã sau để tạo biểu mẫu.

 "use client";
import { useState } from "react";
export default function Page() {
  const [file, setfile] = useState([]);
  const handleSubmit = async (e) => {
    e.preventDefault();
    
  };
  const handleFileSelected = (e) => {
    setfile(e.target.files[0]);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="image" onChange={handleFileSelected} />
      <button type="submit">Upload image</button>
    </form>
  );
}

Khi bạn chọn một tệp và nhấp vào nút gửi, biểu mẫu sẽ gọi hàm handleSubmit. Trong chức năng này, bạn sẽ tải lên hình ảnh.

Đối với các biểu mẫu lớn có nhiều trường, việc sử dụng thư viện biểu mẫu như formik để xử lý xác thực và gửi có thể dễ dàng hơn.

Tải tệp hình ảnh lên nhóm lưu trữ Supabase

Trong hàm handleSubmit, sử dụng ứng dụng khách Supabase để tải hình ảnh lên bằng cách thêm mã bên dưới.

 const handleSubmit = async (e) => {
    e.preventDefault();
    const filename = `${uuidv4()}-${file.name}`;
    const { data, error } = await supabase.storage
      .from("images")
      .upload(filename, file, {
        cacheControl: "3600",
        upsert: false,
      });
    const filepath = data.path;
    
  };

Trong chức năng này, bạn đang tạo một tên tệp duy nhất bằng cách nối tên tệp và UUID được tạo bởi gói uuid npm. Điều này được khuyến nghị để tránh ghi đè lên các tệp có cùng tên.

Bạn sẽ cần cài đặt gói uuid qua npm, vì vậy hãy sao chép và chạy lệnh bên dưới trong terminal.

 npm install uuid

Sau đó, ở đầu trang tải lên, hãy nhập phiên bản 4 của uuid.

 import { v4 as uuidv4 } from "uuid";

Nếu bạn không muốn sử dụng gói uuid, bạn có thể sử dụng một số phương pháp khác để tạo các id duy nhất.

Tiếp theo, sử dụng ứng dụng khách supabase để tải tệp lên bộ chứa lưu trữ có tên là “hình ảnh”. Hãy nhớ nhập ứng dụng khách supabase ở đầu tệp của bạn.

 import { supabase } from "@/lib/supabase";

Lưu ý rằng bạn đang chuyển đường dẫn đến hình ảnh và chính hình ảnh đó. Đường dẫn này hoạt động giống như trong hệ thống tệp. Chẳng hạn, nếu bạn đang lưu hình ảnh vào một thư mục trong bộ chứa có tên là công khai, bạn sẽ chỉ định đường dẫn là “/public/filename”.

Supabase sẽ trả về một đối tượng chứa dữ liệu và đối tượng lỗi. Đối tượng dữ liệu chứa URL của hình ảnh bạn vừa tải lên.

Để chức năng tải lên này hoạt động, bạn phải tạo chính sách truy cập cho phép ứng dụng của bạn chèn và đọc dữ liệu trong bộ chứa lưu trữ Supabase bằng cách thực hiện theo các bước sau:

  1. Trên bảng điều khiển dự án của bạn, nhấp vào Kho trên thanh bên trái.
  2. Chọn thùng lưu trữ của bạn và nhấp vào Truy cập chuyển hướng.
  3. Dưới Chính sách nhómnhấn vào Chính sách mới cái nút.
  4. chọn Để tùy chỉnh đầy đủ tùy chọn để tạo một chính sách từ đầu.
  5. bên trong Thêm chính sách hộp thoại, hãy nhập tên cho chính sách của bạn (ví dụ: “Cho phép Chèn và Đọc”).
  6. Lựa chọn CHÈN Và LỰA CHỌN quyền từ hoạt động được phép trình đơn thả xuống.
  7. Nhấn vào Ôn tập để xem lại các chính sách.
  8. Nhấn vào Cứu để thêm chính sách.

Bây giờ bạn có thể tải lên hình ảnh mà không gây ra lỗi truy cập.

Cung cấp hình ảnh đã tải lên trong ứng dụng của bạn

Để cung cấp hình ảnh trên trang web của bạn, bạn cần có một URL công khai mà bạn có thể truy xuất theo hai cách khác nhau.

Bạn có thể sử dụng ứng dụng khách Supabase như thế này:

 const filepath = "path_to_file_in_buckey"
const { data } = supabase
  .storage
  .from('images')
  .getPublicUrl(`${filepath}`)

Hoặc bạn có thể nối thủ công URL bộ chứa với đường dẫn tệp:

 const filepath = `${bucket_url}/${filepath}`

Sử dụng bất kỳ phương pháp nào bạn thích. Khi bạn có đường dẫn tệp, bạn có thể sử dụng nó trong thành phần hình ảnh Next.js như sau:

 <Image src={filepath} alt="" width={200} height={200}/>

Mã này sẽ hiển thị hình ảnh trên trang web của bạn.

Tạo các ứng dụng mạnh mẽ với Supabase

Sử dụng mã này, bạn có thể chấp nhận tệp từ người dùng thông qua biểu mẫu và tải tệp đó lên bộ lưu trữ Supabase. Sau đó, bạn có thể truy xuất hình ảnh đó và phân phối nó trên trang web của mình.

Bên cạnh việc lưu trữ hình ảnh, Supabase còn có chức năng khác. Bạn có thể tạo cơ sở dữ liệu PostgreSQL, viết các hàm cạnh và thiết lập xác thực cho người dùng của mình.

Bài viết liên quan:

  1. Cách đặt trả lời tự động cho tài khoản Gmail không hoạt động
  2. Tại sao đăng ký trên App Store của bạn có thể tăng mà không có cảnh báo
  3. Bạn nên mua Apple Watch cỡ nào?
  4. Cách tạo bài đăng băng chuyền trên Instagram với Adobe InDesign

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *