SvelteKit-Node网站部署后动态展示FTP上传图片的方案咨询

方案1：SvelteKit原生服务端端点+静态资源映射 #

步骤1：创建服务端API获取图片列表 #

在src/routes/api/images/+server.js中编写端点代码，实时读取FTP图片目录：

import { readdir } from 'node:fs/promises';
import { join } from 'node:path';

export async function GET() {
  // 替换为服务器上FTP图片目录的绝对路径
  const imageDir = join(process.cwd(), '../ftp-uploaded-images');
  try {
    const files = await readdir(imageDir);
    // 过滤仅保留图片格式文件
    const imageFiles = files.filter(file => /\.(jpg|jpeg|png|gif|webp)$/i.test(file));
    // 生成可访问的图片URL（后续通过静态映射暴露）
    const imageUrls = imageFiles.map(file => `/dynamic-images/${file}`);
    return new Response(JSON.stringify(imageUrls), {
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}

步骤2：配置静态资源映射 #

修改svelte.config.js，将FTP图片目录映射为SvelteKit的静态资源路径，让前端能直接访问图片：

import adapterNode from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapterNode(),
    static: {
      external: [
        {
          path: '/dynamic-images', // 前端访问路径
          resolve: () => '/var/ftp/uploads/images' // 服务器上FTP图片的绝对路径
        }
      ]
    }
  }
};

export default config;

步骤3：前端获取并监听更新 #

在页面组件（如+page.svelte）中，通过API拉取图片列表，并结合WebSocket触发更新：

<script>
  import { onMount } from 'svelte';
  let images = [];

  // 拉取最新图片列表
  async function loadImages() {
    const res = await fetch('/api/images');
    images = await res.json();
  }

  onMount(async () => {
    await loadImages();
    // 监听WebSocket消息，收到更新通知时重新加载
    const ws = new WebSocket('ws://your-server-address/ws');
    ws.onmessage = (event) => {
      // 假设Python发送的更新标识为'images-updated'
      if (event.data === 'images-updated') {
        loadImages();
      }
    };
  });
</script>

<div class="image-gallery">
  {#each images as imgUrl}
    <img src={imgUrl} alt="Uploaded image" />
  {/each}
</div>

方案2：集成Express扩展服务端能力（适合更复杂场景） #

如果需要更灵活的服务端控制，可将SvelteKit与Express集成：

步骤1：安装依赖 #

npm install express

步骤2：创建Express服务入口文件server.js #

import express from 'express';
import { handler } from './build/handler.js';
import { readdir } from 'node:fs/promises';
import { join } from 'node:path';

const app = express();
const PORT = process.env.PORT || 3000;

// 暴露FTP图片目录为静态资源
const ftpImageDir = '/var/ftp/uploads/images'; // 替换为你的FTP目录路径
app.use('/dynamic-images', express.static(ftpImageDir));

// 自定义API端点返回图片列表
app.get('/api/images', async (req, res) => {
  try {
    const files = await readdir(ftpImageDir);
    const imageFiles = files.filter(file => /\.(jpg|jpeg|png|gif|webp)$/i.test(file));
    const imageUrls = imageFiles.map(file => `/dynamic-images/${file}`);
    res.json(imageUrls);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 让Express处理SvelteKit的路由
app.use(handler);

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

步骤3：修改启动脚本 #

更新package.json中的启动命令，改为运行Express服务：

{
  "scripts": {
    "start": "node server.js"
  }
}

关键注意事项 #

• 确保Node进程拥有读取FTP图片目录的权限，避免权限错误。
• 完全抛弃import.meta.glob，因为它是构建时静态分析工具，无法获取部署后的动态文件。
• 方案支持文件名动态变化，每次API请求都会实时读取目录内容。

内容的提问来源于stack exchange，提问作者diramazioni