支持通过环境变量自定义全局默认链接前缀；管理端支持自定义链接前缀；管理端部分页面展示效果优化；上传API支持返回完整链接；优化上传页面显示效果

Author: MarSeventh

README.md

@@ -45,6 +45,19 @@
     <summary>更新日志</summary>
 
 
+## 2024.12.27
+
+Add Features:
+
+- 支持通过环境变量自定义全局默认链接前缀（见3.1.3.6自定义配置接口）
+- 管理端支持自定义链接前缀
+- 管理端部分页面展示效果优化
+- `/upload`API支持返回完整链接（请求时设置`returnFormat`参数，详见API文档）
+
+Fix Bugs:
+
+- 优化上传页面显示效果
+
 ## 2024.12.20
 
 Add Features:
@@ -515,6 +528,7 @@ Web端在登录页面输入你的**认证码**即可登录使用；API端需要
 | siteTitle   | 网站标题             | 字符串        | 只支持`字符串`类型，设置为你自定义的网站标题                 |
 | siteIcon    | 网站图标             | 字符串        | 只支持`字符串`类型，设置为你自定义的网站图标链接             |
 | footerLink  | 页脚传送门链接       | 字符串        | 只支持`字符串`类型，设置为你自定义的传送地址（如个人博客链接） |
+| urlPrefix   | 全局默认链接前缀     | 字符串        | 只支持`字符串`类型，设置为自定义的全局默认链接前缀，该前缀会覆盖原始默认前缀，但不会覆盖用户自定义的链接前缀 |
 
 > 整体示例：
 >
@@ -616,7 +630,7 @@ Web端在登录页面输入你的**认证码**即可登录使用；API端需要
 | ------------ | ------------------------------------------------------------ |
 | **接口功能** | 上传图片或视频                                               |
 | **请求方法** | POST                                                         |
-| **请求参数** | **Query参数**：<br />`authCode`: string类型，即为你设置的认证码<br />`serverCompress`: boolean类型，表示是否开启服务端压缩（仅针对图片文件、Telegram上传渠道生效，默认为`true`）<br />`uploadChannel`: string类型，取值为`telegram`和`cfr2`，分别代表telegram bot渠道和Cloudflare R2渠道，默认为`telegram` 渠道<br />`autoRetry`: boolean类型，表示是否开启上传失败自动切换渠道重试，默认开启<br />`uploadNameType`: string类型，表示文件命名方式，可选值为`[default, index, origin]`，分别代表默认`前缀_原名`命名、`仅前缀`命名和`仅原名`命名法，默认为`default`<br />**Body参数(application/form-data)**：<br />`file`: file类型，你要上传的文件 |
+| **请求参数** | **Query参数**：<br />`authCode`: string类型，即为你设置的认证码<br />`serverCompress`: boolean类型，表示是否开启服务端压缩（仅针对图片文件、Telegram上传渠道生效，默认为`true`）<br />`uploadChannel`: string类型，取值为`telegram`和`cfr2`，分别代表telegram bot渠道和Cloudflare R2渠道，默认为`telegram` 渠道<br />`autoRetry`: boolean类型，表示是否开启上传失败自动切换渠道重试，默认开启<br />`uploadNameType`: string类型，表示文件命名方式，可选值为`[default, index, origin]`，分别代表默认`前缀_原名`命名、`仅前缀`命名和`仅原名`命名法，默认为`default`<br />`returnFormat`:string类型，表示返回链接格式，可选值为`[default, full]`，分别代表默认的`/file/id`格式、完整链接格式<br />**Body参数(application/form-data)**：<br />`file`: file类型，你要上传的文件 |
 | **返回响应** | `data[0].src`为获得的图片链接（注意不包含域名，需要自己添加） |
 
 > **请求示例**：
@@ -685,6 +699,7 @@ Web端在登录页面输入你的**认证码**即可登录使用；API端需要
    - ~~背景切换时间自定义~~（2024.9.11已完成）
    - ~~背景透明度支持自定义~~（2024.9.12已完成）
    - ~~页脚自定义传送门~~（2024.10.20已完成）
+   - ~~全局自定义链接前缀~~（2024.12.27已完成）
 5. :white_check_mark:~~增加随机图API~~（2024.7.25已完成）
 6. :white_check_mark:~~完善多格式链接展示形式，增加ubb格式链接支持~~（2024.8.21已完成）
 7. :white_check_mark:~~完善登录逻辑，后端增加认证码校验接口~~（2024.8.21已完成）
@@ -707,7 +722,7 @@ Web端在登录页面输入你的**认证码**即可登录使用；API端需要
 24. :white_check_mark:~~支持自定义链接前缀~~（2024.12.4已完成）
 25. :memo:对接alist，或实现webdav（评估中）
 26. :white_check_mark:~~文件详情增加文件大小记录~~（2024.12.10已完成）
-27. :hourglass_flowing_sand:支持管理员自定义全局默认链接前缀
+27. :white_check_mark:支持管理员自定义全局默认链接前缀
 28. :white_check_mark:~~开放更多文件格式~~（2024.12.9已完成）
 29. :white_check_mark:~~进行删除、加入白名单、加入黑名单等操作时，自动清除CF CDN缓存，避免延迟生效~~（2024.12.11已完成）
 30. :white_check_mark:~~管理端批量选择时，记录用户选择的顺序~~（2024.12.20已完成）

css/209.59f10abe.css

@@ -146,6 +146,15 @@ export async function onRequestPost(context) {  // Contents of context object
         fullId = fileName? unique_index + '_' + fileName : unique_index + '.' + fileExt;
     }
 
+    // 获得返回链接格式, default为返回/file/id, full为返回完整链接
+    const returnFormat = url.searchParams.get('returnFormat') || 'default';
+    let returnLink = '';
+    if (returnFormat === 'full') {
+        returnLink = `${url.origin}/file/${fullId}`;
+    } else {
+        returnLink = `/file/${fullId}`;
+    }
+
     // 清除CDN缓存
     const cdnUrl = `https://${url.hostname}/file/${fullId}`;
     await purgeCDNCache(env, cdnUrl, url);
@@ -159,15 +168,15 @@ export async function onRequestPost(context) {  // Contents of context object
     // 上传到不同渠道
     if (uploadChannel === 'CloudflareR2') {
         // -------------CloudFlare R2 渠道---------------
-        const res = await uploadFileToCloudflareR2(env, formdata, fullId, metadata);
+        const res = await uploadFileToCloudflareR2(env, formdata, fullId, metadata, returnLink);
         if (res.status === 200 || !autoRetry) {
             return res;
         } else {
             err = await res.text();
         }
     } else {
         // ----------------Telegram New 渠道-------------------
-        const res = await uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest);
+        const res = await uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest, returnLink);
         if (res.status === 200 || !autoRetry) {
             return res;
         } else {
@@ -176,13 +185,13 @@ export async function onRequestPost(context) {  // Contents of context object
     }
 
     // 上传失败，开始自动切换渠道重试
-    const res = await tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest);
+    const res = await tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest, returnLink);
     return res;
 }
 
 
 // 自动切换渠道重试
-async function tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest) {
+async function tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest, returnLink) {
     // 渠道列表
     const channelList = ['CloudflareR2', 'TelegramNew'];
     const errMessages = {};
@@ -191,9 +200,9 @@ async function tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fil
         if (channelList[i] !== uploadChannel) {
             let res = null;
             if (channelList[i] === 'CloudflareR2') {
-                res = await uploadFileToCloudflareR2(env, formdata, fullId, metadata);
+                res = await uploadFileToCloudflareR2(env, formdata, fullId, metadata, returnLink);
             } else if (channelList[i] === 'TelegramNew') {
-                res = await uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest);
+                res = await uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest, returnLink);
             }
             if (res.status === 200) {
                 return res;
@@ -208,7 +217,7 @@ async function tryRetry(err, env, uploadChannel, formdata, fullId, metadata, fil
 
 
 // 上传到Cloudflare R2
-async function uploadFileToCloudflareR2(env, formdata, fullId, metadata) {
+async function uploadFileToCloudflareR2(env, formdata, fullId, metadata, returnLink) {
     // 检查R2数据库是否配置
     if (typeof env.img_r2 == "undefined" || env.img_r2 == null || env.img_r2 == "") {
         return new Response('Error: Please configure R2 database', { status: 500 });
@@ -237,7 +246,7 @@ async function uploadFileToCloudflareR2(env, formdata, fullId, metadata) {
 
     // 成功上传，将文件ID返回给客户端
     return new Response(
-        JSON.stringify([{ 'src': `/file/${fullId}` }]), 
+        JSON.stringify([{ 'src': `${returnLink}` }]), 
         {
             status: 200,
             headers: { 'Content-Type': 'application/json' }
@@ -247,7 +256,7 @@ async function uploadFileToCloudflareR2(env, formdata, fullId, metadata) {
 
 
 // 上传到Telegram
-async function uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest) {
+async function uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fileName, fileType, url, clonedRequest, returnLink) {
     // 由于TG会把gif后缀的文件转为视频，所以需要修改后缀名绕过限制
     if (fileExt === 'gif') {
         const newFileName = fileName.replace(/\.gif$/, '.jpeg');
@@ -323,7 +332,7 @@ async function uploadFileToTelegram(env, formdata, fullId, metadata, fileExt, fi
         // 若上传成功，将响应返回给客户端
         if (response.ok) {
             res = new Response(
-                JSON.stringify([{ 'src': `/file/${fullId}` }]), 
+                JSON.stringify([{ 'src': `${returnLink}` }]),
                 {
                     status: 200,
                     headers: { 'Content-Type': 'application/json' }

css/209.59f10abe.css.gz

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/app.fa588650.js"></script><link href="/css/app.def7ef9b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/app.6ee1e6e7.js"></script><link href="/css/app.def7ef9b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>