当前位置：首页 > news >正文

nodejs 获取服务器文件夹里面图片，并前端进行幻灯展示

news 来源：原创 2025/5/8 13:42:03

最近在实现一个特别个性的要求，就是读取服务器的文件夹里面的图片，然后前端进行轮播显示，因为客户要求的开发环境特殊一些，纯js的话又实现不了对本地文件夹的读取，所以这里用到了node.js下面我们来看怎么实现的

为了在Node.js中获取服务器文件夹内的图片并在前端进行幻灯展示，我们将采用与之前相似的策略，但这次我会提供一个更加直接的方式，通过后端API来传递图片URL列表给前端，而不是直接解析HTML。这样做的好处是提高了代码的可维护性和安全性。

第一步：设置Node.js服务器
首先，确保你已经安装了Node.js和npm。接下来，创建一个新的项目目录，初始化npm，并安装Express框架和其它依赖：

mkdir slideshow-server
cd slideshow-server
npm init -y
npm install express multer cors

这里我们额外安装了multer用于处理文件上传（虽然本例中不涉及，但根据需求可能有用），以及cors用于处理跨域问题。

第二步：编写服务器代码
创建一个名为server.js的文件，用于启动Express服务器并提供图片列表API：

const express = require('express');
const path = require('path');
const fs = require('fs');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 3000;
const imgDirectory = 'public/images'; // 确保此目录存在且含有图片

// 使用CORS中间件
app.use(cors());

// 静态文件服务
app.use(express.static(path.join(__dirname, imgDirectory)));

// 获取图片列表API
app.get('/api/images', (req, res) => {
    console.log(req.query.dirs,"传入的参数")
    const dir = req.query.dirs? req.query.dirs : '';
    fs.readdir(imgDirectory+'/'+dir, (err, files) => {
        if (err) {
            res.status(500).send('无法读取图片目录');
        } else {
            // 过滤出图片文件
            const images = files.filter(file => ['.jpg', '.jpeg', '.png', '.gif'].includes(path.extname(file).toLowerCase()));
            res.json(images.map(img => `/images/${dir}/${img}`)); // 返回图片URL列表
        }
    });
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

上面的imgDirectory 指定了图片的根目录，但是我们有时候需要不同的目录层级，所以我默认的添加上了dirs这个参数，但是前提是目录在我们的imgDirectory 这个目录下面

第三步：前端代码
在项目根目录下创建一个public文件夹，用于存放前端资源。然后，在public目录下创建index.html和script.js文件。
这里需要注意的是public这个目录就是您的WEB根目录，目录可以随便建立自行修改即可

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议幻灯展示</title>
    <!-- 引入Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
     <style>
        body{padding:0;margin:0}
        /* 自定义样式 */
        .swiper-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- Swiper容器 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 图片将由JavaScript动态插入 -->
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- 引入Swiper JS 和 自定义脚本 -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

document.addEventListener('DOMContentLoaded', async function() {
    var swiper = new Swiper('.swiper-container', {
        autoplay: {
        delay: 1000, // 单位毫秒，设置为5秒
        },
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
        },
    });

    try {
        //这里修改的是dirs=xxx 这里是要指定的目录必须真实存在的
        const response = await fetch('您服务器的地址:端口/api/images?dirs=a');
        const images = await response.json();
        console.log(images,"我是图片的地址");
        images.forEach(imgUrl => {
            const slide = document.createElement('div');
            slide.className = 'swiper-slide';
            const img = document.createElement('img');
            img.src = imgUrl;
            slide.appendChild(img);
            document.querySelector('.swiper-wrapper').appendChild(slide);
        });
        swiper.update();
    } catch (error) {
        console.error('获取图片列表失败:', error);
    }
});