如何使用 multer 、 Nodejs 、 JS 存储上传的文件?
How to store uploaded files using multer , Nodejs , JS?
我有一个文件输入和几个其他文本输入的多部分表单数据,我有一个名为“public”的目录,其中我有一个名为“上传”的目录我想存储我所有的multer 在那里上传,但不知道为什么他们不在那里上传,下面是我的代码(最后我会提到我的文件层次结构的 ss)
app.js 文件
const express = require('express')
const app = express()
const path = require('path');
const port = process.env.PORT || 3000;
const multer = require('multer');
let publicPath = path.join(__dirname , "../public");
app.set('view engine','ejs');
app.use(express.static(publicPath));
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, '/uploads');
},
filename: function (req, file, cb) {
cb(null , file.originalname);
}
});
var upload = multer({ storage: storage })
app.get('/', (req, res) => {
res.redirect('/login');
})
app.get('/login',(req,res)=>{
res.render('login-register/login');
})
app.get('/register',(req,res)=>{
res.render('login-register/register');
})
// POST
app.post('/login',(req,res)=>{
})
app.post('/register',upload.single('imageInput'),(req,res)=>{
console.log(req.body);
console.log("file size:"+req.file.size);
console.log(req.file.path);
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
我可以看到文件大小、文件名等所有内容,但我只是看不到文件上传到哪里,我希望它们进入 'uploads '目录
下面是 reg.ejs 文件
的代码
<form class="row g-3 needs-validation login-form" method="POST" action="/register" enctype="multipart/form-data">
<div class="profileImage">
<img id="profileImage" src="/images/placeholder.jpg" alt="">
<input type="file" name="imageInput" id="FileUpload1" style="display: none" />
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Email</label>
<input type="email" class="form-control" id="validationCustom01" name="email" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Password</label>
<input type="text" class="form-control" id="validationCustom02" name="password" placeholder="atleast 6" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" name="username" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">CollegeName</label>
<input type="text" class="form-control" id="validationCustom03" name="collegeName" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">Branch</label>
<select class="form-select" name="branch" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Mech/AutoMobile</option>
<option>Electrical/Entc</option>
<option>COMP/IT</option>
<option>Civil</option>
<option>Aerospace/Aeronautical</option>
<option>Biotech</option>
<option>Other</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Sem</label>
<input type="text" name="sem" class="form-control" id="validationCustom05" >
<div class="invalid-feedback">
Provide a sem (optional)
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
ss 对于我的文件层次结构,如您所见,名为“uploads”的文件夹是空的,上传位于“[=33=”中] '文件夹
在你的 multer 存储中尝试相对路径。
由于您的 app.js 在 src
下
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, path.join(__dirname, '../public/uploads')););
},
filename: function (req, file, cb) {
cb(null , file.originalname);
}
});
我有一个文件输入和几个其他文本输入的多部分表单数据,我有一个名为“public”的目录,其中我有一个名为“上传”的目录我想存储我所有的multer 在那里上传,但不知道为什么他们不在那里上传,下面是我的代码(最后我会提到我的文件层次结构的 ss) app.js 文件
const express = require('express')
const app = express()
const path = require('path');
const port = process.env.PORT || 3000;
const multer = require('multer');
let publicPath = path.join(__dirname , "../public");
app.set('view engine','ejs');
app.use(express.static(publicPath));
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, '/uploads');
},
filename: function (req, file, cb) {
cb(null , file.originalname);
}
});
var upload = multer({ storage: storage })
app.get('/', (req, res) => {
res.redirect('/login');
})
app.get('/login',(req,res)=>{
res.render('login-register/login');
})
app.get('/register',(req,res)=>{
res.render('login-register/register');
})
// POST
app.post('/login',(req,res)=>{
})
app.post('/register',upload.single('imageInput'),(req,res)=>{
console.log(req.body);
console.log("file size:"+req.file.size);
console.log(req.file.path);
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
我可以看到文件大小、文件名等所有内容,但我只是看不到文件上传到哪里,我希望它们进入 'uploads '目录 下面是 reg.ejs 文件
的代码 <form class="row g-3 needs-validation login-form" method="POST" action="/register" enctype="multipart/form-data">
<div class="profileImage">
<img id="profileImage" src="/images/placeholder.jpg" alt="">
<input type="file" name="imageInput" id="FileUpload1" style="display: none" />
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Email</label>
<input type="email" class="form-control" id="validationCustom01" name="email" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Password</label>
<input type="text" class="form-control" id="validationCustom02" name="password" placeholder="atleast 6" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" name="username" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">CollegeName</label>
<input type="text" class="form-control" id="validationCustom03" name="collegeName" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">Branch</label>
<select class="form-select" name="branch" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Mech/AutoMobile</option>
<option>Electrical/Entc</option>
<option>COMP/IT</option>
<option>Civil</option>
<option>Aerospace/Aeronautical</option>
<option>Biotech</option>
<option>Other</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Sem</label>
<input type="text" name="sem" class="form-control" id="validationCustom05" >
<div class="invalid-feedback">
Provide a sem (optional)
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
ss 对于我的文件层次结构,如您所见,名为“uploads”的文件夹是空的,上传位于“[=33=”中] '文件夹
在你的 multer 存储中尝试相对路径。 由于您的 app.js 在 src
下var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, path.join(__dirname, '../public/uploads')););
},
filename: function (req, file, cb) {
cb(null , file.originalname);
}
});