Refactor upload function and improve file handling (cf-pages#183)

* feat: upload using tg bot api and improve file handling * fix: adjust the path length * chore: Update "ci-test" script to include "--exit" flag in package.json * feat: 支持根据文件类型选择合适的上传方式，优化上传功能 * docs: 更新README文档，添加Telegram Bot Token和Chat ID获取指南 --------- Co-authored-by: xyTom <[email protected]>
wxkeykey · Dec 1, 2024 · 174c7cc · 174c7cc
1 parent febbd92
commit 174c7cc
Show file tree

Hide file tree

Showing 7 changed files with 499 additions and 358 deletions.
diff --git a/README-EN.md b/README-EN.md
@@ -4,6 +4,24 @@ Free Image Hosting solution, Flickr/imgur alternative. Using Cloudflare Pages an
 
 English|[中文](readme-zh.md)
 
+Use tg channel/chat for storage
+
+How to use?
+
+First, you need to create a new telegram bot to obtain the token and a telegram channel to obtain Chat_ID
+## How to Obtain `Bot_Token` and `Chat_ID` for Telegram
+
+If you don't have a Telegram account yet, please create one first. Then, follow these steps to get the `Bot_Token` and `Chat_ID`:
+
+1. **Get the `Bot_Token`**
+   - In Telegram, send the command `/newbot` to [@BotFather](https://t.me/BotFather), and follow the prompts to input your bot's name and username. Once successfully created, you will receive a `Bot_Token`, which is used to interact with the Telegram API.
+
+2. **Set the bot as a channel administrator**
+   - Create a new channel and, after entering the channel, go to channel settings. Add the bot you just created as a channel administrator, so it can send messages.
+
+3. **Get the `Chat_ID`**
+   - Use [@GetTheirIDBot](https://t.me/GetTheirIDBot) to get your channel ID. Send a message to this bot and follow the instructions to receive your `Chat_ID` (the ID of your channel).
+
 ## Deployment
 
 ### Preparation

diff --git a/README.md b/README.md
@@ -4,6 +4,38 @@
 
 [English](README-EN.md)|中文
 
+> [!IMPORTANT]
+>
+> 由于原有的Telegraph API接口被官方关闭，需要将上传渠道切换至Telegram Channel，请按照文档中的部署要求设置`TG_Bot_Token`和`TG_Chat_ID`，否则将无法正常使用上传功能。
+
+## 如何获取Telegram的`Bot_Token`和`Chat_ID`
+
+如果您还没有Telegram账户，请先创建一个。接着，按照以下步骤操作以获取`BOT_TOKEN`和`CHAT_ID`：
+
+1. **获取`Bot_Token`**
+   - 在Telegram中，向[@BotFather](https://t.me/BotFather)发送命令`/newbot`，根据提示依次输入您的机器人名称和用户名。成功创建机器人后，您将会收到一个`BOT_TOKEN`，用于与Telegram API进行交互。
+
+![202409071744569](https://github.com/user-attachments/assets/04f01289-205c-43e0-ba03-d9ab3465e349)
+
+2. **设置机器人为频道管理员**
+   - 创建一个新的频道（Channel），进入该频道后，选择频道设置。将刚刚创建的机器人添加为频道管理员，这样机器人才能发送消息。
+
+![202409071758534](https://github.com/user-attachments/assets/cedea4c7-8b31-42e0-98a1-8a72ff69528f)
+
+![202409071758796](https://github.com/user-attachments/assets/16393802-17eb-4ae4-a758-f0fdb7aaebc4)
+
+
+3. **获取`Chat_ID`**
+   - 通过[@VersaToolsBot](https://t.me/VersaToolsBot)获取您的频道ID。向该机器人发送消息，按照指示操作，最后您将得到`CHAT_ID`（即频道的ID）。
+   - 或者通过[@GetTheirIDBot](https://t.me/GetTheirIDBot)获取您的频道ID。向该机器人发送消息，按照指示操作，最后您将得到`CHAT_ID`（即频道的ID）。
+
+   ![202409071751619](https://github.com/user-attachments/assets/59fe8b20-c969-4d13-8d46-e58c0e8b9e79)
+
+最后去Cloudflare Pages后台设置相关的环境变量（注：修改环境变量后，需要重新部署才能生效）
+| 环境变量        | 示例值                    | 说明                                                                                   |
+|-----------------|---------------------------|----------------------------------------------------------------------------------------|
+| `TG_Bot_Token`   | `123468:AAxxxGKrn5`        | 从[@BotFather](https://t.me/BotFather)获取的Telegram Bot Token。                        |
+| `TG_Chat_ID`     | `-1234567`                 | 频道的ID，确保TG Bot是该频道或群组的管理员。 |
 
 ## 如何部署
 

diff --git a/admin-imgtc.html b/admin-imgtc.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -45,7 +46,8 @@
     }
 
     .title:hover {
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
     }
 
     .search-card {
@@ -74,13 +76,16 @@
     }
 
     .stats:hover {
-      background-color: #f0eaf8; /* 使用柔和的淡紫色 */
+      background-color: #f0eaf8;
+      /* 使用柔和的淡紫色 */
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
     }
 
     .stats:hover .fa-database {
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
     }
 
     .header-content .actions {
@@ -97,7 +102,8 @@
     }
 
     .header-content .actions i:hover {
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
       transform: scale(1.2);
     }
 
@@ -106,7 +112,8 @@
     }
 
     .header-content .actions .el-dropdown-link i:hover {
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
     }
 
     .header-content .actions .disabled {
@@ -115,7 +122,8 @@
     }
 
     .header-content .actions .enabled {
-      color: #B39DDB; /* 使用柔和的淡紫色 */
+      color: #B39DDB;
+      /* 使用柔和的淡紫色 */
     }
 
     .search-card .el-input__inner {
@@ -229,6 +237,7 @@
     }
   </style>
 </head>
+
 <body>
   <div id="app">
     <el-container>
@@ -248,16 +257,19 @@
                   <i :class="sortIcon"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="dateDesc" :class="{ 'el-dropdown-menu__item--selected': sortOption === 'dateDesc' }">按时间倒序</el-dropdown-item>
-                  <el-dropdown-item command="nameAsc" :class="{ 'el-dropdown-menu__item--selected': sortOption === 'nameAsc' }">按名称升序</el-dropdown-item>
+                  <el-dropdown-item command="dateDesc"
+                    :class="{ 'el-dropdown-menu__item--selected': sortOption === 'dateDesc' }">按时间倒序</el-dropdown-item>
+                  <el-dropdown-item command="nameAsc"
+                    :class="{ 'el-dropdown-menu__item--selected': sortOption === 'nameAsc' }">按名称升序</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </el-tooltip>
             <el-tooltip content="批量复制" placement="bottom">
               <i class="fas fa-link" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchCopy"></i>
             </el-tooltip>
             <el-tooltip content="批量删除" placement="bottom">
-              <i class="fas fa-trash-alt" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchDelete"></i>
+              <i class="fas fa-trash-alt" :class="{ disabled: selectedFiles.length === 0 }"
+                @click="handleBatchDelete"></i>
             </el-tooltip>
             <el-tooltip content="退出登录" placement="bottom">
               <i class="fas fa-home" @click="handleLogout"></i>
@@ -270,10 +282,7 @@
           <template v-for="(item, index) in paginatedTableData" :key="index">
             <el-card>
               <el-checkbox v-model="item.selected"></el-checkbox>
-              <el-image
-                :src="'/file/' + item.name"
-                :preview-src-list="['/file/' + item.name]"
-                fit="cover"
+              <el-image :src="'/file/' + item.name" :preview-src-list="['/file/' + item.name]" fit="cover"
                 lazy></el-image>
               <div class="image-overlay">
                 <div class="overlay-buttons">
@@ -286,13 +295,8 @@
           </template>
         </div>
         <div class="pagination-container">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :total="filteredTableData.length"
-            :page-size="pageSize"
-            @current-change="handlePageChange"
-            :current-page.sync="currentPage">
+          <el-pagination background layout="prev, pager, next" :total="filteredTableData.length" :page-size="pageSize"
+            @current-change="handlePageChange" :current-page.sync="currentPage">
           </el-pagination>
         </div>
       </el-main>
@@ -428,7 +432,15 @@
       mounted() {
         fetch("./api/manage/check", { method: 'GET', credentials: 'include' })
           .then(response => response.text())
-          .then(result => result === "true" ? this.showLogoutButton = true : window.location.href = "./api/manage/login")
+          .then(result => {
+            if (result == "true") {
+              this.showLogoutButton = true;
+            } else if (result == "Not using basic auth.") {
+              // Do nothing
+            } else {
+              window.location.href = "./api/manage/login";
+            }
+          })
           .catch(() => this.$message.error('同步数据时出错，请检查网络连接'));
 
         fetch("./api/manage/list", { method: 'GET', credentials: 'include' })
@@ -447,4 +459,5 @@
     });
   </script>
 </body>
+
 </html>