图片列表调用缩略图

pages/gallery.vue

@@ -8,7 +8,7 @@
     .flex.flex-row.items-center.justify-center.gap-1
       label.text-gray-500.text-sm.font-bold.px-2.py-1.bg-gray-200.rounded-md.cursor-pointer(
         for="file"
-      ) 上传图片
+      ) 上传图片 {{ status }}
       input#file.hidden(type="file", accept="image/*", multiple="multiple", @change="upload")
       .flex-1.flex.flex-col.justify-center.items-center.text-center
         .text-gray-500.text-sm.font-bold.px-2.py-1.bg-gray-200.rounded-md.cursor-pointer(
@@ -16,18 +16,17 @@
         ) 刷新
   .relative.mt-24.transition-opacity.duration-700.ease-in-out(
     ref="PUB",
-    v-if="!pending",
-    :class="{ 'opacity-100': !pending, 'opacity-10': pending }"
+    v-if="status === 'success'",
+    :class="{ 'opacity-100': status === 'success', 'opacity-10': status !== 'success' }"
   )
     .absolute.transition-all.duration-700.ease-in-out.left-0.top-2000.bg-gray-100(
-      v-for="item in data.list" :key="item.image",
+      v-for="item in data" :key="item.image",
       :data-w="item.width",
       :data-h="item.height",
       class="hover:bg-gray-200"
     )
       NuxtLink(:to="`/gallery/${item.id}`")
-        //img.w-full(:src="`${item.image}?w=${WIDTH}`" loading="lazy")
-        img.w-full(:src="item.image+'@w480.webp'" loading="lazy")
+        img.w-full(:src="`/api/gallery/${item.id}@w480.webp`" loading="lazy")
         .absolute.top-0.left-0.right-0.text-white.overflow-hidden.break-words.pb-4(
           style="background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25))"
         )
@@ -42,7 +41,7 @@
 </template>
 
 <script setup>
-const { data, pending, refresh } = useFetch("/api/gallery?page=1&pageSize=40")
+const { data, status, refresh } = useFetch("/api/gallery?page=1&pagesize=40")
 const PUB = ref(null)
 const WIDTH = ref(320)
 const account = useState('account')

server/api/gallery/index.js

@@ -15,7 +15,8 @@ if (!fs.existsSync(dirPath)) {
 export default defineEventHandler(async event => {
     // 处理 GET 请求(读取image中的图片文件列表)
     if (event.node.req.method === 'GET') {
-        return event.context.db.Gallery.findAll({ where: event.context.query })
+        const { page, pagesize, ...query } = event.context.query
+        return event.context.db.Gallery.findAll({ where: query, offset: (page - 1) * pagesize, limit: pagesize })
     }
 
     // 处理 POST 请求(FromData上传图片)