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

石家庄科技网站建设企业邮箱注册

wzjs 2025/8/29 12:31:52

石家庄科技网站建设,企业邮箱注册,江门网站建设策划,广州最新封闭封控区域最近在实现一个特别个性的要求，就是读取服务器的文件夹里面的图片，然后前端进行轮播显示，因为客户要求的开发环境特殊一些，纯js的话又实现不了对本地文件夹的读取，所以这里用到了node.js下面我们来看怎么实现的为了在…

最近在实现一个特别个性的要求，就是读取服务器的文件夹里面的图片，然后前端进行轮播显示，因为客户要求的开发环境特殊一些，纯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);}
});