最近在实现一个特别个性的要求，就是读取服务器的文件夹里面的图片，然后前端进行轮播显示，因为客户要求的开发环境特殊一些，纯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);
}
});
整体来说最后实现的效果就是通过接口返回图片列表的json数据，然后前端动态插入进去，咱们这里用到了swiper您可以自行的修改样式实现更好看的更复杂的要求。
共同进步才是关键
