feat: add image thumb

Author: CrazyMrYan

.gitignore

@@ -15,6 +15,8 @@ pids
 *.pid
 *.seed
 *.pid.lock
+package-lock.json
+yarn.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
@@ -45,6 +47,7 @@ jspm_packages/
 # 
 public/files/*
 provisional/*
+privacy/*
 
 # Snowpack dependency directory (https://snowpack.dev/)
 web_modules/

index.js

@@ -5,20 +5,18 @@ const tinify = require('tinify');
 const path = require('path');
 const fs = require('fs');
 const mime = require('mime-types');
+const sharp = require('sharp');
 const { checkAndCreateTable } = require('./utils/checkAndCreateTable');
 const pool = require('./utils/db');
+const { appendSuffixToFilename } = require('./utils/appendSuffixToFilename');
 require('dotenv').config({ path: '.env.local' });
 
 const app = new Koa();
 const router = new Router();
 
-// TinyPNG API 密钥
 tinify.key = process.env.TINIFY_KEY;
 
-// Tinify 支持的文件格式
 const tinifySupportedMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
-
-// 所有图片格式
 const imageMimeTypes = [
   'image/jpeg',
   'image/png',
@@ -30,10 +28,8 @@ const imageMimeTypes = [
   'image/svg+xml'
 ];
 
-// 设置静态文件服务目录
 app.use(require('koa-static')(path.join(__dirname, 'public')));
 
-// 创建必要的目录
 const createDirectories = () => {
   const dirs = [
     path.join(__dirname, 'provisional'),
@@ -48,7 +44,6 @@ const createDirectories = () => {
 
 createDirectories();
 
-// 配置 koaBody 中间件处理文件上传
 app.use(
   koaBody({
     multipart: true,
@@ -59,36 +54,44 @@ app.use(
   })
 );
 
-// 文件上传和压缩的路由
 router.post('/upload', async (ctx) => {
   const connection = await pool.getConnection();
   try {
-    // 获取上传的文件
     const files = ctx.request.files.file;
     const fileList = Array.isArray(files) ? files : [files];
     const responses = [];
 
-    // 检查是否需要压缩
     const compress = ctx.query.compress !== 'false'; // 默认压缩
-    // 检查是否保留临时文件
     const keepTemp = ctx.query.keepTemp === 'true'; // 默认不保留临时文件
-    // 获取请求的返回类型
+    const isThumb = ctx.query.isThumb === 'true';
     const responseType = ctx.query.type;
 
     for (const file of fileList) {
-      // 获取文件的 MIME 类型
       const mimeType = mime.lookup(file.filepath);
 
-      // 生成输出文件路径
       const outputFilePath = path.join(
         __dirname,
         'public',
         'files',
         path.basename(file.filepath)
       );
+      let outputFileThumbPath = null;
+      if (isThumb && imageMimeTypes.includes(mimeType)) {
+        const fileThumbName = appendSuffixToFilename(file.newFilename, 'thumb');
+
+        outputFileThumbPath = path.join(
+          __dirname,
+          'public',
+          'files',
+          fileThumbName
+        );
+
+        await sharp(file.filepath)
+          .resize(200, 200) // 调整图像大小为200x200像素
+          .toFile(outputFileThumbPath);
+      }
 
       if (compress && tinifySupportedMimeTypes.includes(mimeType)) {
-        // 如果文件类型受 Tinify 支持且要求压缩，使用 TinyPNG API 压缩文件
         await tinify.fromFile(file.filepath).toFile(outputFilePath);
       } else {
         // 如果不支持压缩或者不要求压缩，保留临时文件则复制文件，否则移动文件
@@ -99,42 +102,39 @@ router.post('/upload', async (ctx) => {
         }
       }
 
-      // 构建文件 URL
       const fileUrl = `${process.env.PUBLIC_NETWORK_DOMAIN}/files/${path.basename(
         outputFilePath
       )}`;
+      const thumb_location = outputFileThumbPath ? `${process.env.PUBLIC_NETWORK_DOMAIN}/files/${path.basename(outputFileThumbPath)}` : null;
 
-      // 插入文件信息到数据库
       await connection.execute(
         `INSERT INTO files (
-          filename, filesize, filelocation, created_by, is_public
-        ) VALUES (?, ?, ?, ?, ?)`,
+          filename, filesize, filelocation, created_by, is_public, thumb_location, is_delete
+        ) VALUES (?, ?, ?, ?, ?, ?, ?)`,
         [
           path.basename(outputFilePath),
           fs.statSync(outputFilePath).size,
           fileUrl,
           ctx.query.createdBy || 'anonymous',
-          ctx.query.isPublic === 'true'
+          ctx.query.isPublic === 'true',
+          thumb_location,
+          0 // 假设默认的 `is_delete` 状态为 0（未删除）
         ]
       );
 
       if (responseType === 'md' && imageMimeTypes.includes(mimeType)) {
-        // 如果文件是图片格式且请求类型是 'md'，返回 Markdown 格式
         responses.push({
           filepath: `![${path.basename(outputFilePath)}](${fileUrl})`
         });
       } else {
-        // 否则返回普通 URL
         responses.push({ filepath: fileUrl });
       }
 
       if (!keepTemp && fs.existsSync(file.filepath)) {
-        // 删除临时上传文件
         fs.unlinkSync(file.filepath);
       }
     }
 
-    // 返回响应
     ctx.body = fileList.length > 1 ? responses : responses[0];
   } catch (error) {
     ctx.status = 500;
@@ -144,15 +144,12 @@ router.post('/upload', async (ctx) => {
   }
 });
 
-// 获取文件信息的路由
 router.get('/files', async (ctx) => {
   const connection = await pool.getConnection();
   try {
-    // 获取分页参数
     const limit = parseInt(ctx.query.limit, 10) || 10; // 每页数量，默认为 10
     const offset = parseInt(ctx.query.offset, 10) || 0; // 偏移量，默认为 0
 
-    // 执行查询
     const [rows] = await connection.execute(
       `SELECT * FROM files LIMIT ? OFFSET ?`,
       [limit, offset]
@@ -167,7 +164,6 @@ router.get('/files', async (ctx) => {
   }
 });
 
-// 启动服务器
 app.use(router.routes()).use(router.allowedMethods());
 
 app.listen(process.env.SERVER_PORT, async () => {

package.json

@@ -22,6 +22,7 @@
     "mysql2": "^3.10.1",
     "pm2": "^5.4.0",
     "tinify": "^1.7.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "sharp": "0.31.0"
   }
 }

public/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>批量上传文件和图床</title>
-    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.css" type="text/css" rel="stylesheet" />
     <style>
         #app {
             padding: 20px;
@@ -47,8 +47,8 @@
 
 <body>
     <div id="app"></div>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-    <script src="https://unpkg.com/element-plus@2.7.5/dist/index.full.js"></script>
+    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.prod.min.js" type="application/javascript"></script>
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js" type="application/javascript"></script>
     <script>
         const { createApp, ref, onMounted } = Vue;
         const { ElTabs, ElTabPane, ElUpload, ElButton, ElMessage, ElSelect, ElOption, ElImage, ElLoading } = ElementPlus;
@@ -72,7 +72,7 @@
                         const data = await response.json();
                         images.value = data.map(file => ({
                             ...file,
-                            preview: `${file.url}`
+                            preview: `${file.thumb_location ?? file.filelocation}`
                         }));
                     } catch (error) {
                         ElMessage.error('获取图片列表失败');
@@ -86,7 +86,7 @@
                     formData.append('file', file);
 
                     try {
-                        const response = await fetch('https://source.giao.club/upload?type=md&compress=false', {
+                        const response = await fetch('https://source.giao.club/upload?type=md&compress=false&isThumb=true', {
                             method: 'POST',
                             body: formData,
                         });
@@ -120,7 +120,7 @@
                         formData.append('file', file);
 
                         try {
-                            const response = await fetch('https://source.giao.club/upload?type=md&compress=false', {
+                            const response = await fetch('https://source.giao.club/upload?type=md&compress=false&keepTemp=true&isThumb=true', {
                                 method: 'POST',
                                 body: formData,
                             });
@@ -183,14 +183,11 @@
                                 <el-option label="文件" value="files"></el-option>
                             </el-select>
                         </div>
-                        {{images}}
-                        <el-loading :loading="loading">
                             <div class="waterfall">
                                 <div class="waterfall-item" v-for="(image, index) in images" :key="index">
                                     <el-image :src="image.preview" :alt="image.filename" fit="cover" />
                                 </div>
                             </div>
-                        </el-loading>
                     </el-tab-pane>
                 </el-tabs>
             `