Node.js 无法访问React节点中上载文件夹中的图像

在我的MERN应用程序中，我尝试访问客户端上使用multer保存在本地数据库中的图像。 我的后端文件夹的结构如下所示：

--- api
    --- controllers
    --- model
    --- routes
--- config
    --- db.js
    --- appConfig.js
--- utils
    --- uploads
    --- multerMiddleware.js
--- app.js

图像上传和存储到本地数据库工作完全正常。创建新数据时，客户端在API响应中接收的数据包含上载图像的URL，以便可以再次访问该图像（如显示图像缩略图）

我的代码如下：

App.js

const express = require("express");
const path = require('path');

const app = express();
const directory = path.join(__dirname, '/uploads');
app.use('/uploads', express.static(directory));

require("./config/db/db")();
require("./config/appRoutes/appRoutes")(app);

module.exports = app;

const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, __dirname + '/uploads')
    },
    filename: function (req, file, cb) {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, fileName);
    }
});
const upload = multer({
    storage
});

module.exports = upload;

multerFile.js

const express = require("express");
const path = require('path');

const app = express();
const directory = path.join(__dirname, '/uploads');
app.use('/uploads', express.static(directory));

require("./config/db/db")();
require("./config/appRoutes/appRoutes")(app);

module.exports = app;

const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, __dirname + '/uploads')
    },
    filename: function (req, file, cb) {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, fileName);
    }
});
const upload = multer({
    storage
});

module.exports = upload;

控制器

exports.createService = async (req, res) => {

    const service_name = req.body.main_name;

    const url = req.protocol + '://' + req.get('host');

    let service_pic;
    if (req.file) {
        service_pic = url + '/utils/uploads/' + req.file.filename;
    }

    try {

        const service = new Services({
            _id: new mongoose.Types.ObjectId(),
            service_name,
            service_pic
        });

        const new_service = await service.save();

        res.status(201).json({ message: "New data created", result: new_service });

    } catch (error) {
        console.log(error);
        res.status(500).json({ message: "Internal server error", error });
    }
}

使用路线，

http://localhost:5000/services/all

，我得到的JSON数据如下：

{
   createdAt: "2020-09-07T08:25:11.581Z"
   service_name: "TEST"
   service_pic: "http://localhost:5000/utils/uploads/testio-logo-rgb1.png"
   updatedAt: "2020-09-07T08:25:11.581Z"
}

当我尝试访问

http://localhost:5000/utils/uploads/testio-logo-rgb1.png

，它总是返回一个错误：

“error”：{“message”：“Route Not found”}

。图像被正确地存储在

/uploads

文件夹中，但仍然无法在客户端访问

---

我不确定出了什么问题。非常感谢您的帮助。

我相信您的URL不正确

http://localhost:5000/utils/uploads/testio-logo-rgb1.png

应该是

---

http://localhost:5000/uploads/testio-logo-rgb1.png

我认为您的URL不正确

http://localhost:5000/utils/uploads/testio-logo-rgb1.png

应该是

---

http://localhost:5000/uploads/testio-logo-rgb1.png

将

'/uploads'

更改为

'utils/uploads'

// app.js
const directory = path.join(__dirname, 'utils/uploads');
app.use('/uploads', express.static(directory));

这段代码意味着：您已经在

/uploads

上设置了一个静态资产服务端点。每次请求到达此端点时，服务器都会查找文件夹

/utils/uploads

---

例如请求：

http://localhost:5000/uploads/testio-logo-rgb1.png

将

'/uploads'

更改为

'utils/uploads'

// app.js
const directory = path.join(__dirname, 'utils/uploads');
app.use('/uploads', express.static(directory));

这段代码意味着：您已经在

/uploads

上设置了一个静态资产服务端点。每次请求到达此端点时，服务器都会查找文件夹

/utils/uploads

---

例如请求：

http://localhost:5000/uploads/testio-logo-rgb1.png

尝试了相同的方法。但是我的请求url仍然指向这个：

http://localhost:5004/utils/uploads/testio-logo-rgb1.png

让它正常工作。我还需要更改

服务\u pic=url+'/utils/uploads/'+req.file.filename

to

service_pic=url+'/uploads/'+req.file.filename谢谢：）尝试了相同的方法。但是我的请求url仍然指向这个：
http://localhost:5004/utils/uploads/testio-logo-rgb1.png
让它正常工作。我还需要更改
服务\u pic=url+'/utils/uploads/'+req.file.filename
to
service_pic=url+'/uploads/'+req.file.filename谢谢：）