/react-epic-project

React +MemFire 实现的用于快速生成在线图片链接的图床工具，简单高效

Primary LanguageJavaScriptMIT LicenseMIT

A Useful Tool for Image

介绍

纯前端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 bukect

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

开发

  1. 配置环境 vim .env
SUPABASE_URL="https://cokr4***********baseapi.memfiredb.com"
SUPABASE_KEY="eyJhbGciOiJIUz***************************************************************************c"

key

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

部署

  1. 打包

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

  2. 将包上传至静态托管 deploy

  3. 自定义域名 domain