阅读量:0
最近在实现一个特别个性的要求，就是读取服务器的文件夹里面的图片，然后前端进行轮播显示，因为客户要求的开发环境特殊一些，纯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您可以自行的修改样式实现更好看的更复杂的要求。
共同进步才是关键
