React项目中Node.js与Supabase连接及图片存显实现咨询

一、Node.js连接Supabase #

首先安装Supabase官方客户端：

npm install @supabase/supabase-js

从Supabase控制台获取你的项目URL和服务端密钥（服务端密钥需保密，切勿暴露在前端代码中），然后创建客户端实例：

const { createClient } = require('@supabase/supabase-js');

const supabaseUrl = '你的Supabase项目URL';
const supabaseServiceKey = '你的Supabase服务端密钥';

const supabase = createClient(supabaseUrl, supabaseServiceKey);

至此完成Node.js与Supabase的连接，可通过该实例操作存储与数据库。

二、React前端上传图片至Supabase #

1. 前端安装Supabase客户端 #

npm install @supabase/supabase-js

2. 初始化前端Supabase客户端（使用匿名公钥） #

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = '你的Supabase项目URL';
const supabaseAnonKey = '你的Supabase匿名公钥';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

3. 实现图片上传组件 #

import { useState } from 'react';
import { supabase } from './supabaseClient';

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploading, setUploading] = useState(false);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!selectedFile) return;

    setUploading(true);
    const fileName = `${Date.now()}-${selectedFile.name}`;

    // 上传至Supabase存储的指定桶（需先在控制台创建名为'images'的桶）
    const { error } = await supabase.storage
      .from('images')
      .upload(fileName, selectedFile);

    if (!error) {
      // 获取图片公网地址并存入数据库（需先创建'user_images'表）
      const { data: publicUrl } = supabase.storage
        .from('images')
        .getPublicUrl(fileName);

      await supabase.from('user_images').insert({
        url: publicUrl.publicUrl,
        created_at: new Date().toISOString()
      });
      alert('图片上传成功');
    } else {
      alert('上传失败：' + error.message);
    }
    setUploading(false);
    setSelectedFile(null);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={uploading || !selectedFile}>
        {uploading ? '上传中...' : '上传图片'}
      </button>
    </div>
  );
}

export default ImageUpload;

三、从Supabase获取图片并卡片式展示 #

import { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';

function ImageGallery() {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const fetchImages = async () => {
      const { data, error } = await supabase
        .from('user_images')
        .select('*')
        .order('created_at', { ascending: false });

      if (!error) {
        setImages(data);
      } else {
        console.error('获取图片失败：', error);
      }
    };

    fetchImages();
    // 可选：监听数据库变化，实时更新图片列表
    const subscription = supabase
      .channel('public:user_images')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'user_images' }, () => {
        fetchImages();
      })
      .subscribe();

    return () => supabase.removeChannel(subscription);
  }, []);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem', padding: '1rem' }}>
      {images.map((image) => (
        <div key={image.id} style={{ border: '1px solid #eee', borderRadius: '8px', overflow: 'hidden' }}>
          <img 
            src={image.url} 
            alt="用户上传图片" 
            style={{ width: '100%', height: '200px', objectFit: 'cover' }}
          />
          <p style={{ padding: '0.5rem', textAlign: 'center', margin: 0 }}>
            {new Date(image.created_at).toLocaleString()}
          </p>
        </div>
      ))}
    </div>
  );
}

export default ImageGallery;

四、Supabase控制台前置配置 #

1. 创建存储桶：进入Supabase控制台的Storage页面，创建名为images的桶，设置访问权限为public（可按需调整）。
2. 创建数据库表：进入SQL编辑器，执行以下SQL创建user_images表：

CREATE TABLE user_images (
  id SERIAL PRIMARY KEY,
  url TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

内容的提问来源于stack exchange，提问作者MYTHREYAN P