Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用multer、Nodejs、JS存储上传的文件?_Javascript_Node.js_Express_Npm_Multer - Fatal编程技术网

Javascript 如何使用multer、Nodejs、JS存储上传的文件?

Javascript 如何使用multer、Nodejs、JS存储上传的文件?,javascript,node.js,express,npm,multer,Javascript,Node.js,Express,Npm,Multer,我有一个文件输入和几个其他文本输入的多部分表单数据,我有一个名为“public”的dir,其中有一个名为“uploads”的dir,我想把我所有的multer上传存储在那里,但不明白为什么它们不上传到那里,下面是我的代码(最后我会提到我的文件hirachy的ss) app.js文件 const express = require('express') const app = express() const path = require('path'); const port = process.

我有一个文件输入和几个其他文本输入的多部分表单数据,我有一个名为“public”的dir,其中有一个名为“uploads”的dir,我想把我所有的multer上传存储在那里,但不明白为什么它们不上传到那里,下面是我的代码(最后我会提到我的文件hirachy的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}`)
})

 <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>
我可以看到所有内容,如文件大小、文件名,但我看不到文件上传的位置,我希望它们进入“上传”目录 下面是reg.ejs文件的代码

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}`)
})

 <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>

电子邮件
看起来不错!
密码
看起来不错!
用户名
@
请选择一个用户名。
科勒格纳姆
请提供一个有效的城市。
分支机构
选择。。。
机械/汽车
电气/电子工程
COMP/IT
公民的
航空航天
生物技术
其他
请选择一个有效的状态。
扫描电镜
提供sem(可选)
同意条款和条件
提交前必须同意。
提交表格
ss for my file hirarchy,如您所见,名为“上传”的文件夹为空,上传位于“公共”文件夹内

在多个存储器中尝试相对路径。 因为你的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);
  }
});

是的,谢谢,但是我的方法有什么问题,我在express.static()中设置了publicPath,所以每当我使用“/”时,它应该总是引用public directory!!所以当我说`/uploads`时,它应该知道,`/`我指的是我在static()方法中设置的公共目录,也请回答我在上述评论中提到的问题,这也将真正消除我的困惑,谢谢@Mohamed OrabyWell,我以前也有类似的问题,这就是为什么我知道可能是什么问题,但由于我很少使用multer,所以我并没有认真考虑它。尝试阅读multer的文档,可能会有所帮助