开发工具前端【免费下载链接】picx️ 一款基于 GitHub API 开发的图床工具提供图片上传托管和生成图片链接。项目地址https://gitcode.com/gh_mirrors/pi/picx点击查看免费下载PicX 是一款完全基于 GitHub API 开发的开源图床工具面向需要图片上传托管 生成图片链接的开发者和博客作者提供在线使用、无需安装的 Web 服务形态。读完本文你将掌握 PicX 的核心使用流程OAuth 授权 / Token 登录、图床配置、多级目录管理、上传与链接生成的工作原理GitHub Git Database API 调用链、链接规则模板替换以及图片压缩、水印、GitHub Pages 部署、PWA 离线化等进阶能力的底层实现。一、PicX 是什么PicX 的定位在 README.md 中一句话概括一款基于 GitHub API 开发的图床工具提供图片上传托管和生成图片链接。它不依赖任何自建后端服务而是直接以浏览器为客户端通过 GitHub REST API 把图片写入用户自己的 GitHub 仓库再利用 GitHub、GitHub Pages、jsDelivr 等公开资源域名生成可访问的图片链接。核心亮点在线使用、无需下载、无需安装项目本身是一个纯前端应用Vue 3 Vite部署在静态托管平台即可使用操作简单、文档完善、持续维护提供官方文档、快速开始教程与完善的设置项代码开源、数据安全、完全免费源码以 AGPL-3.0 协议开源见 LICENSE图片数据存放在用户自己的 GitHub 仓库中不经过第三方中转服务器。从仓库 package.json 可以看到项目使用 pnpm 管理依赖packageManager: pnpm11.18.0核心依赖包括vue3.5、vue-router、pinia状态管理、element-plusUI 组件库、axiosHTTP 客户端以及jsquash/*系列浏览器端图片编解码库运行环境要求 Node.js24 25。二、登录方式GitHub OAuth 授权与 Token 填写PicX 提供两种登录方式GitHub OAuth 授权登录通过 GitHub App 授权换取可用于调用 API 的访问令牌填写 GitHub Token 登录用户手动粘贴自己创建的 Personal Access TokenPAT跳过 OAuth 流程。无论哪种方式最终都要得到一个有效 token 才能调用 GitHub API。底层实现上所有请求都由 src/utils/request/axios.ts 中创建的 axios 实例统一发出请求拦截器从本地存储读取用户配置getLocal(LS_CONFIG)当命中 GitHub API baseURL 且存在 token 时自动向请求头注入Authorization: Bearer token。相关基础地址与超时配置在 src/common/constant/request.tsAXIOS_BASE_URL https://api.github.comAXIOS_TIMEOUT 3000005 分钟考虑到大图上传耗时。OAuth 授权状态token、installationId、授权时间等由 Vuex 模块 src/stores/modules/github-authorize/index.ts 管理并持久化到 LocalStorage。同时src/common/constant/settings.ts 定义了GITHUB_AUTHORIZE_EXPIRE 5 * 24 * 60 * 60 * 1000即 GitHub App 授权 Token 的有效期为5 天过期后需要重新授权。登录后调用getGitHubUserInfo见 src/common/api/user.ts获取用户信息用于展示头像、用户名并作为图床仓库的 owner。三、图床配置仓库、分支与多级目录登录后需要完成图床配置核心配置项在 src/common/model/user-config.ts 的UserConfigInfoModel中定义配置项说明owner/repo图床仓库的属主与仓库名branch图片写入的目标分支默认值为master见 src/common/constant/init.ts 的INIT_REPO_BARNCHemail/name提交 commit 时使用的 committer 信息dirMode目录模式rootDir根目录/dateDir日期目录/repoDir仓库目录/newDir新建目录dirList仓库内的目录列表供级联选择仓库的创建与初始化若还没有图床仓库PicX 可调用createReposrc/common/api/repo.ts直接创建公开仓库默认仓库名为picx-images-hostingINIT_REPO_NAME见 src/common/constant/init.ts由于GitHub Git Database API 不支持在完全空的仓库上操作initRepoREADME会先向仓库写入一个README.md文件完成仓库初始化提交信息为Init repo via PicX这是源码注释中明确说明的工程细节。多级目录管理getDirInfoList与getRepoPathContentsrc/common/api/dir.ts通过 Contents APIGET /repos/{owner}/{repo}/contents/{path}带refbranch参数拉取指定路径下的目录与图片前端以级联组件repo-dir-cascader呈现多级目录。限制方面src/common/constant/settings.ts 定义了NEW_DIR_COUNT_MAX 5即新建目录最多支持 5 级层级。管理页的上传时间并非存储字段而是通过getLatestCommitTime查询该文件路径最近一次 commit 的 author 时间获得GET /repos/{owner}/{repo}/commits?path...per_page1这也是图床管理页能按时间排序的底层依据。四、图片上传四种选择方式与两条 API 链路PicX 支持拖拽、复制粘贴、选择文件三种方式选择图片README 中列为已实现功能文件进入上传队列后统一走后续处理。文件类型与大小限制src/utils/file-utils.ts 中的isImage判定 png / jpg / jpeg / gif / webp / awebp / avif / svg / ico 等格式isVideo仅支持MP4IMG_UPLOAD_MAX_SIZE 30MB与VIDEO_UPLOAD_MAX_SIZE 30MB是上传大小上限src/common/constant/settings.ts。gettingFilesHandle负责把File通过FileReader转成 base64并校验类型与大小。上传前处理压缩与水印优先UploadImageModelsrc/common/model/image.ts同时保存originalBase64、watermarkBase64、compressBase64三份数据。真正上传时src/utils/upload-utils.ts 按压缩结果 → 水印结果 → 原始数据的优先级取 base64 内容const tempBase64 ( img.base64.compressBase64 || img.base64.watermarkBase64 || img.base64.originalBase64 ).split(,)[1]即开启了压缩就传压缩后的图否则开了水印就传带水印的图两者都没开则传原图。单张上传链路单张上传使用 Contents APIsrc/common/api/upload.ts 的uploadSingleImagePUT /repos/{owner}/{repo}/contents/{dir}/{filename}请求体包含messageUpload image via PicX、branch、base64 形式的content若配置了email还会附加committer: { name: owner, email }使提交以用户身份记录src/utils/upload-utils.ts 的uploadImageToGitHub。批量上传链路Git Database API批量上传采用更高效的Git Database API 四步法uploadImagesToGitHub创建 blobgetFileBlob把每张图的 base64 提交为POST /repos/{owner}/{repo}/git/blobs返回 blob sha获取 headgetBranchInfo读取分支信息得到根目录 tree sha 与 head commit sha创建 treecreateTree基于base_tree构建新 treemode100644、typeblob见 src/common/api/merge.ts创建 commit 并移动 refcreateCommit以parents: [head.commit.sha]生成新 commitcreateRef通过PATCH /repos/{owner}/{repo}/git/refs/heads/{branch}把分支指针指向新 commit完成一次原子化的批量提交。同样的 tree/commit/ref 组合也被批量删除复用删除时将条目的sha置为null即表示从base_tree中删除对应路径见 src/utils/image-utils.ts 的deleteImagesFromGitHub与 src/common/api/git-tree.ts 的注释。单张删除则直接走 Contents API 的DELETEsrc/common/api/delete.ts需携带文件 sha。文件名处理重命名 / 哈希化 / 添加前缀 / 时间戳src/views/upload-image/upload-image.util.ts 的generateUploadImageObject集中处理命名重命名名称中的空格统一替换为-哈希化默认开启enableHash: true以图片对象的 uuid 作为 hash 拼入文件名格式为名称.uuid.后缀确保重名图片在仓库内唯一添加前缀可配置固定前缀prefix格式为前缀名称.uuid.后缀时间戳命名可开启enableTimestamp名称整体替换为毫秒时间戳该选项与哈希化、前缀互斥——在设置页切换时会自动关闭其他两项见 src/views/picx-settings/picx-settings.vue 的onTimestampNamingChange同一毫秒内批量添加时通过lastTimestamp 1递增保证批内唯一。五、图片链接生成内置规则、自定义规则与格式转换这是 PicX 的核心价值点上传完成即生成可直接使用的图片链接且支持多 CDN 规则自由切换。链接规则模板ImageLinkRuleModelsrc/common/model/image.ts将规则抽象为带占位符的 URL 模板。生成时src/utils/image-link-utils.ts 的generateImageLink用实际值替换四个占位符占位符替换值{{owner}}仓库属主{{repo}}仓库名{{branch}}分支名{{path}}图片在仓库内的完整路径内置 5 种预设规则初始值见 src/stores/modules/user-settings/index.ts// GitHub Pages https://{{owner}}.github.io/{{repo}}/{{path}} // GitHub 原始文件 https://github.com/{{owner}}/{{repo}}/raw/{{branch}}/{{path}} // jsDelivr CDN https://cdn.jsdelivr.net/gh/{{owner}}/{{repo}}{{branch}}/{{path}} // Statically CDN https://cdn.statically.io/gh/{{owner}}/{{repo}}{{branch}}/{{path}} // 国内 jsDelivr 镜像 https://jsd.cdn.zzko.cn/gh/{{owner}}/{{repo}}{{branch}}/{{path}}自定义配置链接规则设置页提供ADD_IMAGE_LINK_TYPE_RULE/UPDATE_IMAGE_LINK_TYPE_RULE/DEL_IMAGE_LINK_TYPE_RULE三个动作src/stores/modules/user-settings/index.ts支持新增、编辑、删除规则编辑时经imgLinkRuleVerification校验规则合法性如必须包含必要占位符满足任意自建域名或 CDN 前缀的场景。链接格式转换上传后支持一键复制链接并可在Markdown / HTML / BBCode三种格式间自由转换imageLinkFormat默认关闭、选中 Markdown// Markdown imageName // HTML img srcimageLink altimageName / // BBCode [img]imageLink[/img]transformImageLinksrc/utils/image-link-utils.ts在复制前按所选格式替换imageLink生成的链接与imageName图片文件名去后缀。批量复制batchCopyImageLinks则把多张图的链接按行拼接后一次性写入剪贴板对应 README 中的批量复制多张图片链接。六、图片压缩与图片水印图片压缩浏览器端编码PicX 内置高效压缩算法可配置上传前自动压缩。压缩在浏览器端完成不经过任何服务器编码器枚举CompressEncoderEnumsrc/common/model/image.ts提供mozJPEG / avif / webP / png四种默认开启压缩且编码器为webP实现上基于jsquash/*系列 WebAssembly 编解码库由 src/services/image-codec.ts 的encodeImage创建独立 Web Workersrc/workers/image-codec.worker.ts执行编码任务结束即worker.terminate()释放资源避免长时间占用主线程仅对png / jpg / jpeg / webp / avif生效isNeedCompress见 src/utils/file-utils.ts。图片水印src/utils/add-watermark.ts 使用 Canvas 2D 绘制水印配置项与默认值如下默认值见 src/stores/modules/user-settings/index.ts配置项说明默认值text水印文字PicXfontSize字号50position位置leftTop/leftBottom/rightTop/rightBottom/fullScreenrightBottomtextColor文字颜色十六进制#FFFFFFopacity透明度0.5rotate全屏水印旋转角度度-20gap全屏水印平铺间距px80单角水印通过strokeText fillText绘制带描边的文字fullScreen全屏模式下则以旋转矩阵在画布上按gap平铺形成满幅斜纹水印。水印同样只对png / jpg / jpeg / webp / avif生效。七、一键部署 GitHub Pages 与自定义域名README 将 GitHub Pages 列为内置链接规则之一与之配套的是一键部署能力。部署链路在 src/components/deploy-status-bar/deploy-status-bar.util.ts 的deployGhPages与 src/common/api/branch.ts 的checkoutGhPagesBranch中实现同步 CNAME先把设置里的自定义域名同步到图床仓库当前分支根目录的CNAME文件src/common/api/deploy.ts 的syncCloudCnameFile包含规范化去协议、去路径、小写与格式校验isValidCustomDomain同步失败则中断部署检查 gh-pages 分支存在则先删除再从当前分支复制创建POST /repos/{owner}/{repo}/git/refsref: refs/heads/gh-pages等待部署生效由于 GitHub Pages 部署需要时间源码以setTimeout(..., 50000)约 50 秒模拟部署进程成功后自动把图片链接规则切换为GitHub Pages并把部署状态写入仓库根目录的.deploy文件saveCloudDeployInfo。自定义域名与.settings中的customDomain保持一致保证部署结果与设置一致域名置空时会清理仓库中的 CNAME 文件。八、设置云端同步、PWA 与暗夜模式设置云端同步用户设置UserSettingsModel见 src/common/model/user-settings.ts不仅保存在浏览器 LocalStorage还可同步到图床仓库根目录的.settings文件src/common/api/settings.ts。由于水印文字等可能包含中文源码特意实现了UTF-8 安全的 Base64 编解码TextEncoder/TextDecoder配合btoa/atob避免window.btoa对非 Latin1 字符抛异常文件不存在则创建Init settings via PicX存在则带 sha 更新Update settings via PicX。本地存储统一使用PICX_IH_前缀src/common/constant/storage.tsLocalStorage 保存CONFIG用户配置、SETTINGS用户设置、MANAGEMENT管理页状态、AUTHORIZATION授权信息SessionStorage 保存GLOBAL_SETTINGS全局设置。PWA 支持PWA 由 src/plugins/vite/pwa.ts 配置vite-plugin-pwaregisterType: autoUpdatemanifest 使用 public/logo192x192.png 与 public/logo512x512.png 作为应用图标。Workbox 除预缓存静态资源外还做了两类运行时缓存图片 CDN 缓存对 GitHub raw / GitHub Pages / jsDelivr / Statically / 国内 jsDelivr 域下的图片资源采用StaleWhileRevalidate策略缓存名picx-image-hosting-runtime最多 500 条、保留 30 天实现离线秒开由于img请求为 no-cors 的 opaque 响应cacheableResponse.statuses显式放行[0, 200]编解码器 wasm 缓存CacheFirst缓存图片编解码用的.wasm文件加速压缩模块加载。配套的 src/utils/image-cache-utils.ts 提供purgeImageRuntimeCache在覆盖上传、删除、移动、重命名成功后按仓库路径后缀清理缓存条目避免管理页展示已被替换或删除的旧图清理失败不影响主流程。暗夜模式与 i18n暗夜模式ThemeModeEnumsrc/common/model/user-settings.ts支持system跟随系统/light/dark三种模式默认system由 src/utils/set-theme-mode.ts 应用到全局i18n支持中文简体、中文繁体、英文三种语言语言包见 src/locales/zh-CN.json、src/locales/zh-TW.json、src/locales/en.json全局设置中可切换。九、本地开发、构建与测试仓库 package.json 提供完整的前端工程脚本# 安装依赖pnpm 11.18.0 pnpm install # 本地开发 pnpm dev # 类型检查vue-tsc tsc pnpm typecheck # 单元测试Vitest pnpm test # E2E 测试Playwright pnpm test:e2e # 代码规范ESLint Stylelint pnpm lint pnpm lint:style # 生产构建 pnpm build # 一键全量校验lint style typecheck test build pnpm verify单测覆盖了目录图片列表 storetests/unit/dir-image-list-store.test.ts与文件工具函数tests/unit/file-utils.test.tsE2E 冒烟测试见 tests/e2e/smoke.spec.ts。十、小结PicX 用纯前端 GitHub API 的组合实现了一条完整自洽的图床链路OAuth/Token 登录 → 仓库与多级目录配置 → 拖拽/粘贴/选择图片 → 压缩与水印处理 → Git Database API 批量提交 → 模板化生成链接 → 多格式复制 → 管理页批量删除与部署 GitHub Pages。其数据存进用户自己的仓库、链接走公开 CDN的架构既保证了数据主权又无需自建存储与流量服务是理解以公开平台 API 构建个人工具这一工程范式的高质量参考实现。如果想要深入代码推荐从 src/utils/upload-utils.ts上传核心流程、src/utils/image-link-utils.ts链接生成、src/stores/modules/user-settings/index.ts全部设置默认值三个文件读起。赞分享开发工具前端【免费下载链接】picx️ 一款基于 GitHub API 开发的图床工具提供图片上传托管和生成图片链接。项目地址https://gitcode.com/gh_mirrors/pi/picx点击查看免费下载相关推荐终极Mac时间管理神器这款开源计时器让你效率翻倍 ⏰终极Mac时间管理神器这款开源计时器让你效率翻倍 ⏰ 在快节奏的数字时代高效的时间管理已成为Mac用户的必备技能。今天为您推荐一款专为macOS设计的开源开发工具前端TomatoBarmacOS菜单栏上最简洁的番茄钟应用TomatoBarmacOS菜单栏上最简洁的番茄钟应用 TomatoBar是一款专为macOS设计的轻巧高效的菜单栏番茄钟计时器基于著名的番茄工作法帮助用开发工具前端如何快速上手PicX10分钟完成GitHub图床配置如何快速上手PicX10分钟完成GitHub图床配置 PicX是一款基于GitHub API开发的免费图床工具提供图片上传托管、生成图片链接和常用图片工具箱开发工具前端上一篇深入理解Qwen2.5-7B-Instruct的AWQ量化策略UINT4权重优化下一篇前端错误监控终极指南Sentry在AI应用中的异常跟踪实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考