node+express使用multer上传的图片怎么让前端显示?-灵析社区

JayCoder

做了一个前后端分离的文件上传 前端使用react+antd的upload组件实现上传功能,后端使用node+multer,图片上传成功了,也存到数据库里了但是前端无法显示 前端代码 } /> 后端代码 var express = require('express') var router = express.Router() const multer = require('multer') const userController = require('../controllers/users') const upload = multer({ dest: 'public/avatars/' }) router.post( '/update-avatar', upload.single('avatar'), userController.updateAvatar ) updateAvatar: async (req, res) => { const { file } = req const avatarUrl = `/public/avatars/${file.filename}` const { id } = req.body try { const data = await userServices.updateAvatar(avatarUrl, id) if (data[0]) { res.send(sendData(true)) } } catch (error) { res.status(500).send(sendData(false, error.message)) } }, 上传成功后在本地文件显示为这样 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/787ed57f6d5f5809db322b65ede82bca.png) 数据库里 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/8b19e73cbf40bf13af30cff881666155.png) 显示在页面上 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/db96ffce594d23ddae9c3fa589390a1f.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/f7e552e5123c79892692d8b20747c102.png)

阅读量:19

点赞量:0

问AI
很明显上传成功,存储成功,但是你本地使用的时候,用的是相对路径,所以浏览器会去前端项目的路径里找图片,当然是找不到的。 解决方案就是使用后端的路径。或者通过某种方式进行映射也可以,看你准备怎么部署。