无法从 React-Node 中的上传文件夹访问图像

Question

在我的 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;

multerFile.js

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 时，它总是 returns 错误："error":{"message":"Route Not found"}}。图像已正确存储到 /uploads 文件夹中，但仍无法在客户端上访问。

我不确定出了什么问题。感谢任何解决此问题的帮助。

Answer 1

我认为您的 URL 不正确，

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

应该是

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

Answer 2

将'/uploads'更改为'utils/uploads'

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

此代码块表示：您已在 /uploads 设置了 static-assets 服务端点。每次请求到达此端点时，您的服务器都会查找文件夹 /utils/uploads.
一个示例请求是：http://localhost:5000/uploads/testio-logo-rgb1.png

无法从 React-Node 中的上传文件夹访问图像

Unable to access images from upload folder in React-Node

node.js

express

reactjs

multer