Node.js & Express.js中获取用户上传图片的正确路径而非文件名

1. 正确拼接本地存储路径 #

别直接用字符串硬拼路径，用Node.js内置的path模块处理，能自动适配不同系统的路径分隔符，避免出现像你遇到的Capstone_Projectme.jpg这种缺少分隔符的错误。假设picture文件夹和当前脚本在同一目录下，代码改成这样：

const path = require('path');
// 拼接项目根目录、picture文件夹和图片文件名
var bi = path.join(__dirname, 'picture', req.body.image);

执行后会生成类似C:\Users\...\Capstone_Project\picture\me.jpg的正确本地存储路径。

2. 配置Express静态资源访问 #

前端没法直接读取本地绝对路径，得在Express里把picture文件夹设为静态资源目录，让前端能通过URL访问图片：

const express = require('express');
const app = express();
// 配置后，前端可通过/picture/xxx.jpg的格式访问图片
app.use('/picture', express.static(path.join(__dirname, 'picture')));

3. 数据库存储相对URL路径 #

别把本地绝对路径存进数据库，而是存相对URL路径，比如/picture/me.jpg。这样EJS模板里直接用这个路径就能加载图片：

修改存储逻辑，把/picture/${req.body.image}存入数据库的book_img字段，你的EJS代码不用改，就能正常显示图片：

<% for (let item of ItemLists) {%>
    <div class="card" style="width: 18rem;">
        <img src="<%= item.book_img %>" id="image" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title"><%= item.book_title%></h5>
          <p class="card-text"><%= item.book_description %>.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
<% } %>

这样前端请求图片时，Express会通过静态资源配置找到对应的本地文件，实现正确显示。

内容的提问来源于stack exchange，提问作者Suliman Abdulrazzaq