使用Multer上传图片并存储路径后，如何在客户端展示图片？

我用Multer接收上传的图片并把图片路径保存到数据库后，不知道怎么从客户端获取该图片并在页面上展示。以下是我的上传代码：

import multer from 'multer';

const storageConfig = multer.diskStorage({
    destination: (req, file, cb) => {
         cb(null, './images')
    },

    filename: (req, file, cb) => {
          cb(null, Date.now() + '-' +  file.originalname)
    }
})

const upload = multer({storage: storageConfig});

 let path = '';

app.post('/upload',upload.single('image'), (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    if(req.file) {
        console.log(req.file);
        path = req.file.path;
        res.send('hi')
        return;
    }
    res.send('bye')
})

要在客户端展示图片，需要完成以下几个步骤：

1. 让后端托管静态图片资源 #

Express默认不会对外暴露本地文件夹，你需要用express.static中间件把./images文件夹设置为可访问的静态资源目录，这样客户端就能通过URL直接访问里面的图片。

在你的Express app里添加这行代码：

import express from 'express';
const app = express();

// 托管静态图片文件夹，客户端可以通过 /images/xxx.jpg 访问图片
app.use('/images', express.static('./images'));

2. 保存正确的图片访问路径到数据库 #

之前你存的req.file.path是本地路径（比如./images/12345-xxx.jpg），这个路径客户端没法直接用。你应该保存客户端可访问的URL路径，比如/images/12345-xxx.jpg。

修改上传接口的逻辑，把正确的路径存到数据库：

app.post('/upload',upload.single('image'), (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    if(req.file) {
        // 构造客户端可访问的路径
        const imageUrl = `/images/${req.file.filename}`;
        // 这里把imageUrl保存到你的数据库，比如：
        // db.query('INSERT INTO images (url) VALUES (?)', [imageUrl]);
        res.json({ imageUrl }); // 返回给前端这个路径
        return;
    }
    res.send('no file uploaded');
})

3. 后端提供接口获取图片路径 #

当你需要从数据库里取出图片路径展示时，写一个GET接口返回对应的图片URL：

// 示例：根据id获取图片信息
app.get('/image/:id', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    const imageId = req.params.id;
    // 从数据库查询对应的imageUrl
    // db.query('SELECT url FROM images WHERE id = ?', [imageId], (err, result) => {
    //     if(err) throw err;
    //     res.json({ imageUrl: result[0].url });
    // });
    // 这里用模拟数据举例
    res.json({ imageUrl: '/images/1690000000000-test.jpg' });
})

4. 前端页面展示图片 #

前端拿到图片URL后，直接用<img>标签的src属性即可展示：

方式1：直接用返回的路径（前后端同域名） #

<!-- 假设前端通过接口拿到了imageUrl = "/images/1690000000000-test.jpg" -->
<img src="/images/1690000000000-test.jpg" alt="上传的图片">

方式2：跨域情况（比如前端在localhost:3000，后端在localhost:5000） #

如果前后端端口不同，需要把后端的域名加进去：

<img src="http://localhost:5000/images/1690000000000-test.jpg" alt="上传的图片">

前端JS请求示例（用fetch） #

// 请求获取图片路径
fetch('http://localhost:5000/image/1')
  .then(res => res.json())
  .then(data => {
    const img = document.createElement('img');
    // 跨域的话要加后端域名
    img.src = `http://localhost:5000${data.imageUrl}`;
    img.alt = '上传的图片';
    document.body.appendChild(img);
  });

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