如何使用Express/Multer上传文件而不重新定向

Question

注意：我找到了这篇文章，但我没有发现有用，其他帖子与Angular/React有关，我不使用。

我有一个文件上传，该文件应发送响应，该响应是正确的类型。文件上传正常工作，但我的页面将重定向到文件所在的位置。我希望该页面在其所在的同一页面上。

home.ejs：

<!-- upload video -->
<form method="post" action="/upload" class="custom-file" enctype="multipart/form-data">
  <input type="file" name="video-file" class="custom-file-input" />
  <span class="custom-file-control"></span>
  <!-- optional dropdown to specify number of cores -->
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" 
            type="button" 
            id="dropdownMenuButton" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false"
            name="number-of-cores">
      Use all Cores
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item">Use all Cores</a>
      <a class="dropdown-item">Use one Core</a>
    </div>
  </div>
  <!-- upload button -->
  <input class="btn btn-primary upload-btn" type="submit" id="upload-btn" value="Upload">

这就是我希望该页面不重定向的原因；因此，该页面可以显示文件是否为正确的格式。

$('body').on('click', '#upload-btn', function (event) {
      $.ajax({
          type: 'POST',
          url: '/',
          dataType : "application/json; charset=utf-8",
          contentType: JSON.stringify(false),
          success: function (response) { 
              $("#errorMessage").html("* file successfully opened");
              console.log('successfully uploaded', response);
          },
          error: function (result) {
              $("#errorMessage").html("* Incorrect file/no file given");
              console.log('coudn't upload');
          }
      });
      //return false;
  })

server.js

const express = require('express');
const multer = require('multer');
var path = require('path')
const app = express();
app.set('view engine', 'ejs');
app.set('views', './views');
app.use(express.static('public'));
function fileFilter (req, file, cb) {
    if (path.extname(file.originalname) !== '.mp4') {
        return cb(null, false);
    }
    cb(null, true);
}
const upload = multer({ dest: 'uploads/', fileFilter:fileFilter});
app.get('/', (req, res) => {
    res.render('home', { testGreeting: 'Hello world' });
});
app.post('/upload', upload.single('video-file'), function(req, res) {
    console.log(req.file);
    console.log(req.params);
    if (req.file) {
        console.log("successfully received");
        res.send({success: "success"});
    }
    return res.end();
});
app.listen(3000, () => console.log('Listening on Port 3000.'));

这可能是主题的，但是我的Ajax代码总是会运行错误，而从未成功。如果我也能得到帮助，那将不胜感激。谢谢！

更新：event.preventDefault()是解决方案：

$('body').on('click', '#upload-btn', function (event) {
      event.preventDefault();
      $.ajax({
              ... //same as before
      });
      return false;
})

Answer 1

您需要在客户端上使用event.preventDefault()防止默认的浏览器操作。您可以在此处了解有关预防违规的更多信息