satori/satori
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片列表调用缩略图

Browse Source
This commit is contained in:
satori
2025-03-05 19:35:16 +08:00
parent 72aa87e8bf
commit 7edcc67469
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
pages/gallery.vue
View File

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

3
server/api/gallery/index.js
View File

@@ -15,7 +15,8 @@ if (!fs.existsSync(dirPath)) {
export default defineEventHandler(async event => { export default defineEventHandler(async event => {
// 处理 GET 请求(读取image中的图片文件列表) // 处理 GET 请求(读取image中的图片文件列表)
if (event.node.req.method === 'GET') { 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上传图片) // 处理 POST 请求(FromData上传图片)