CloudFlare-ImgBed

注意：本仓库为Telegraph-Image项目的重制版，如果你觉得本项目不错，在支持本项目的同时，也请支持原项目。

1.Introduction

cf-pages/Telegraph-Image项目的重制版，实现了登录鉴权、上传图片预览、一键切换上传方式（拖拽上传、粘贴上传）、多文件上传、整体复制、多格式复制等功能。

2.Features

开源
- 前端开源（可自行修改、打包使用）
炫酷的动效（
- 流畅丝滑的过渡动画~
- 上传文件实现呼吸灯效果
人性化上传
- 支持一键切换上传方式（拖拽点击、粘贴）
- 支持批量上传（不限同时选择文件数量，但为了保证稳定性，同时处于上传状态的文件最多为10个）
- 上传显示实时上传进度
- 上传后图片无需手动点击，可直接展示在管理页面中
多样化复制
- 支持整体复制和单独复制（整体复制即将所有链接通过换行串联起来后复制）
- 支持MarkDown、HTML和原始链接三种格式复制
支持身份认证、防滥用
- 支持Web和API上传认证（感谢hl128k）
- 支持访问域名限制（感谢hl128k）
一些小功能
- 支持随机图API，从图床中随机返回一张图片

3.Deployment

3.1直接使用

部署方式和环境变量和原仓库保持一致。

提前准备

你唯一需要提前准备的就是一个 Cloudflare 账户（如果需要在自己的服务器上部署，不依赖 Cloudflare，可参考#46 ）

手把手教程

简单 3 步，即可部署本项目，拥有自己的图床

Fork 本仓库 (注意：必须使用 Git 或者 Wrangler 命令行工具部署后才能正常使用，文档)
打开 Cloudflare Dashboard，进入 Pages 管理页面，选择创建项目，选择连接到 Git 提供程序

按照页面提示输入项目名称，选择需要连接的 git 仓库，点击部署站点即可完成部署

后台管理

默认关闭，开启方式如下：
- 创建一个新的KV数据库
- 进入项目对应设置->函数->KV 命名空间绑定->编辑绑定->变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库
- 设置好后，访问http(s)://你的域名/admin即可进入后台管理页面
管理员认证，默认关闭，开启方式如下：
- 项目对应设置->环境变量->为生产环境定义变量->编辑变量 ，添加BASIC_USER作为管理员用户名，BASIC_PASS作为管理员登录密码

图片审查

支持成人内容审查和自动屏蔽，开启步骤如下：

前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的 API key
打开 Cloudflare Pages 项目的管理页面，依次点击设置，环境变量，添加环境变量
添加一个变量名称为ModerateContentApiKey，值为第一步获得的API key，点击保存即可

Web和API上传认证

环境变量增加认证码AUTH_CODE，值为你想要设置的认证码。

Web端在登录页面输入你的认证码即可登录使用。

API格式：

接口名称	/upload
接口功能	上传图片或视频
请求方法	POST
请求参数	Query参数： `authCode`，string类型，即为你设置的认证码 Body参数(application/form-data)： `file`，file类型，你要上传的文件
返回响应	`data[0].src`为获得的图片链接（注意不包含域名，需要自己添加）

请求示例：

curl --location --request POST 'https://your.domain/upload?authCode=your_authCode' \

--header 'User-Agent: Apifox/1.0.0 (https://apifox.com)' \

--form 'file=@"D:\\杂文件\\壁纸\\genshin109.jpg"'

响应示例：

[
    {
        "src": "/file/738a8aaacf4d88d1590f9.jpg"
    }
]

访问域名限制

环境变量增加ALLOWED_DOMAINS，多个允许的域名用英文,分割，如：域名.xyz,域名.cloudns.be,域名.pp.ua

远端遥测

便于开发者进行bug的捕捉和定位，但是过程中可能收集到访问链接、域名等信息，如您不愿意泄露类似信息给项目开发者，可在环境变量中添加disable_telemetry为true来退出遥测。

随机图API

接口名称	/random
接口功能	从图床中随机返回一张图片的链接（注意会消耗列出次数）
前置条件	设置`AllowRandom`环境变量，值为`true`
请求方法	GET
请求参数	Query参数： `type`：设为`url`时返回完整url链接，否则返回随机图的文件路径。
响应格式	data.url为返回的链接/文件路径。

请求示例：

curl --location --request GET 'https://your.domain/random' \
--header 'User-Agent: Apifox/1.0.0 (https://apifox.com)'

响应示例：

{
    "url": "/file/4fab4d423d039b4665a27.jpg"
}

注意

修改环境变量后需要重新部署才能生效！

3.2定制化修改

按照3.1步骤部署完成后，前往仓库MarSeventh/Sanyue-ImgHub，按照操作说明进行DIY和打包操作，最后将打包好的/dist目录中的内容替换到该仓库的根目录下即可（复制+替换）。

4.TODO

4.1Add Features💕

~~增加粘贴图片上传功能（2024.7.22已完成）~~
~~增加markdown、html等格式链接复制功能（2024.7.21已完成）~~
~~上传页面增加管理端入口（2024.7.21已完成）~~
增加用户个性化配置接口
~~增加随机图API（2024.7.25已完成）~~

4.2Fix Bugs👻

~~修复API上传无法直接展示在后台的问题（2024.7.25已修复）~~

5.Tips

前端开源，参见MarSeventh/Sanyue-ImgHub项目。

如果觉得项目不错希望您能给个免费的star✨✨✨，非常感谢！

dbuycn / cf-imagebed Goto Github PK

cf-imagebed's Introduction