如何形成img URL

我创建了一个简单的节点解决方案，其中包含一个表单，在该提交表单上，它将显示正在表单中插入的图像。

app.js

    const app = express()
    app.use(express.static('public'))
    app.engine('hbs',handlebars({
    layoutsDir : __dirname + '/views/layouts',
    defaultLayout : "mainlayout",
    extname : "hbs",
    partialsDir : __dirname + '/views/partials'
    }))

    app.use("/uploader", imgUploader)
    app.set('view engine','hbs') 

impUpload.js

const express = require('express')
const route = express.Router();
const multer = require('multer');
const path = require('path');

const Storage = multer.diskStorage({
destination: './public/uploads',
filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
})

const upload = multer({
storage: Storage,
fileFilter: function (req, file, cb) {
    checkFileType(file, cb);
}
 }).single('myImage');

function checkFileType(file, cb) {
const filetypes = /jpeg|jpg|png|gif/;
const extname = filetypes.test(path.extname(file.originalname).toLowerCase())
const mimeType = filetypes.test(file.mimetype);
if (extname && mimeType) {
    return cb(null, true)
}
else {
    cb('Error: Images Only!!!');
}
}

route.get("/", (req, res) => {
console.log("inside imgupload folder")
res.render("fileUpload")
})

route.post("/uploaded", (req, res) => {
upload(req, res, (error) => {
    if (error) {
        res.render("fileUpload", { message: error })
    }
    else {
        if (req.file == undefined) {
            res.render("fileUpload", { message: 'Please upload a file' })
        }
        else {
            res.render('fileUpload', { 
                message: 'File Uploaded Successfully', 
                file: `uploads/${req.file.filename}`                 
            });
        }
    }   
 })
 })
 module.exports = route

fileUpload.js

<div class="container"> 
<h1>file upload</h1>

{{message}}
<form action="/uploader/uploaded" method="post" enctype="multipart/form-data">
<div class="file-field input-field">
  <div class="btn">
    <span>File</span>
    <input name="myImage" type="file">
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text">
  </div>
   </div>
    <button type="submit" class="btn n">Submit</button>
 </form> 


 <br>
 </div>
 <div>
{{#if file}}
 <img src="{{file}}" class="responsive-img">
 {{/if}}
 </div>

当前我的解决方案的结构如下

我在控制台中收到错误

获取http://localhost:3000/uploader/uploads/myImage-1589223958713.PNG 404（未找到）

尽管我已经在app.js中定义了公用文件夹，但我不明白为什么它试图在上传器/上传文件中找到该img

但是在app.js中尝试相同的代码时，它的工作绝对正常。

如果我尝试在imgupload.js中使用express（）。use（express.static（path.join（__ dirname，'../public'））），那么我会收到错误消息不允许加载本地资源：file：/// C：/arunoday/node/login_express_mongo/public/uploads/myImage-1589220613014.PNG

任何帮助将不胜感激。

这就是浏览器处理相对路径的方式。

您有一个包含以下内容的车把模板：<img src="{{file}}" class="responsive-img">

file的值设置为uploads/${req.file.filename}，这类似于uploads/myImage-1589223958713.PNG。

当您使用上述file的值执行模板时，您将获得：<img src="uploads/myImage-1589223958713.PNG" class="responsive-img">

[当浏览器看到相对URL，例如uploads/myImage-1589223958713.PNG时，它必须找出绝对URL。由于此相对URL并非以/开头，因此浏览器认为它是当前页面URL的子路径。

如果当前页面URL为http://localhost:3000/uploaded/uploader，浏览器会认为您的uploads/myImage-1589223958713.PNG URL是http://localhost:3000/uploader/的子级，因此产生：http://localhost:3000/uploader/uploads/myImage-1589223958713.PNG。

为了获得正确的URL，您想要设置file的值，使其包含完整路径：

file: `/public/uploads/${req.file.filename}`