个人图床实现

介绍

纯前端React配合BaaS能力0成本搭建的一个简易图床。

功能

核心功能包括：注册、登录、上传图片、图片删除、图床展示等。。

游客也可以直接上传图片，但有大小限制，且游客图床共享。

登录用户图床隔离。

技术栈

react-create-app、styled-components、React-Router、Mobx、Antd、MemFire

链接

网站预览链接

使用到的BaaS能力

• 云数据库： 存储上传的图片信息

• 对象存储： 存储图片

• 用户认证：用户注册、登陆、登出

• API：提供API 供前端react调用

• 静态托管：托管此项目

主要逻辑代码

认证

  async register(email, password) {
  let { user, error } = await supabase.auth.signUp({ email, password })
  console.log(error)
  if (error) throw error
  console.log(user)
  return user
},

async login(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password })
  if (error) throw error
  return data.user
},

async logout() {
  const { error } = await supabase.auth.signOut()
  if (error) throw error
}

图片上传

    let { data, error } = await supabase.storage.from('images').upload(filename, file, {upsert: true})
    if (error) {
        console.log(error)
        throw error
    }

    const { data: {publicUrl} } = supabase.storage.from('images').getPublicUrl(filename)

    const { data: exit, error:error0 } = await supabase
      .from('images')
      .select()
      .eq('filename', filename)

    if (exit.length !== 0) {
        const { error: error1 } = await supabase
          .from('images')
          .update({'url': publicUrl})
          .eq('filename', filename)
        if (error1) throw error1
    } else {
        const { data: dbData, error: dbError } = await supabase.from('images').insert([
          { filename, owner_id: user_id, url: publicUrl }
        ])
        if (dbError) throw dbError
        return dbData
    }

    
    const { data, error } = await supabase.from('images')
      .select('id, filename, url, created_at')
      .eq('owner_id', user_id)
      .range(page * limit, (page + 1) * limit - 1)
      .order('created_at', { ascending: false })

部署

BaaS准备

1. 登录MemFire创建应用
   

2. 创建数据库表 images
   

3. 创建bucket images
   

4. 配置bucket 访问策略，图简单可以直接设置允许所有用户可访问
   

开发

1. 配置环境 vim .env

SUPABASE_URL="https://cokr4***********baseapi.memfiredb.com"
SUPABASE_KEY="eyJhbGciOiJIUz***************************************************************************c"

2. 安装依赖
   yarn install
3. 本地启动
   yarn start

部署

1. 打包

   yarn build
   cd build/
   zip -rq -y index.zip ./ 
   

2. 将包上传至静态托管
   

3. 自定义域名