<img src="/uploads/image/0637.jpg" alt="如何形成img URL"/>
如何形成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}`
更多推荐
如何形成img URL
发布评论