Node.js 中托管本地图片文件

请先学习
前端小白安装node、vue、Express、Electron及(Electron桌面端exe应用开发)
Electron结合vue3 打包

一、实现操作步骤

(一)、安装 Node.js 和 npm

确保你的系统上已经安装了 Node.js 和 npm。

(二)、创建项目文件夹

创建一个新的文件夹作为你的项目根目录。

(三)、初始化项目

在项目根目录中运行 npm init 来初始化一个新的 Node.js 项目。

(四)、安装 Express

安装 Express.js 框架和相关依赖。

(五)、编写服务器代码

创建一个服务器文件,如 app.js,并配置 Express 来托管本地盘上的图片。

二、具体实操

(一)、新建文件路径

bash 复制代码
G:\codevue>mkdir nodeimage

(二)、安装 Express

bash 复制代码
G:\codevue>cd nodeimage
npm install express --save

(三)、nodeimage新建app.js文件

1. 实现代码

js 复制代码
const express = require('express');
const path = require('path');
const fs = require('fs');

const app = express();

// 配置托管 C 盘上的图片文件夹
const imageFolderPath = 'G:\\codevue\\images'; // 替换为你的图片文件夹路径

// 创建中间件来处理图片文件的请求
app.use('/images', (req, res) => {
    const decodedPath = decodeURIComponent(req.path.replace('/images', ''));
      // 处理 URL 中的空格
    const urlWithSpacesReplaced = decodedPath.replace('/%20/g', '_'); // 假设文件名中的空格被替换成了下划线
  
    const imagePath = path.join(imageFolderPath, urlWithSpacesReplaced);
//   const imagePath = path.join(imageFolderPath, req.path.replace('/images', ''));

  // 检查文件是否存在
  fs.access(imagePath, fs.constants.F_OK, (err) => {
    if (err) {
      // 文件不存在,返回 404 错误
      res.status(404).send('File not found');
    } else {
      // 文件存在,读取文件并发送到客户端
      fs.readFile(imagePath, (err, data) => {
        if (err) {
          res.status(500).send('Error reading file');
        } else {
          // 设置正确的 MIME 类型
          const mimeType = getMimeType(imagePath);
          res.setHeader('Content-Type', mimeType);
          res.send(data);
        }
      });
    }
  });
});

// 获取文件的 MIME 类型
function getMimeType(filePath) {
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.png': 'image/png',
    '.gif': 'image/gif',
    // 可以添加更多 MIME 类型
  };
  return mimeTypes[ext] || 'application/octet-stream';
}

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2.情况说明

情况一:图片里面存在中文描述,需要增加解析中文。

js 复制代码
const decodedPath = decodeURIComponent(req.path.replace('/images', ''));

情况二:图片里面存在特殊字符_,需要转化

js 复制代码
const urlWithSpacesReplaced = decodedPath.replace('/%20/g', '_'); 

(四)、运行服务器

1.启动

cmd 复制代码
# 执行 G:\codevue>cd nodeimage 路径下
node app.js

2.图片访问

本地路径

复制代码
G:\codevue\images\default - 副本.png

浏览器访问

复制代码
http://localhost:3000/images/default%20-%20%E5%89%AF%E6%9C%AC.png
相关推荐
Q_Q196328847534 分钟前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
陈随易6 小时前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
Q_Q19632884758 小时前
python+springboot大学生心理测评与分析系统 心理问卷测试 自动评分分析 可视化反馈系统
开发语言·spring boot·python·django·flask·node.js·php
EndingCoder10 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
machinecat11 小时前
node,小程序合成音频的方式
前端·node.js
草木红14 小时前
express 框架基础和 EJS 模板
arcgis·node.js·express
亮子AI1 天前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
Yvonne爱编码1 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
Juchecar1 天前
AI教你常识之 ESM + Express + Vue3 + CSV文件 + Pinia + CRUD
node.js
召摇1 天前
Nue.js深度解析:极简主义前端框架的革新实践
前端·node.js