【问题标题】:Multer req.body empty in node jsMulter req.body 在节点 js 中为空
【发布时间】:2019-02-06 05:59:37
【问题描述】:

我正在使用 multer 上传表单数据(一些图像文件)。

但是 req.body 和 req.files 都是空的。当我上传图片时,我收到了“您的图片已上传”的成功消息,但我的文件夹是空的。

我尝试了 StackOverflow 和 GitHub 上提供的所有解决方案。 但没有运气。

在我的代码下面

HTML 文件中的表单

<form id="uploadForm" enctype="multipart/form-data" action="multerFile" method="post">
  <input type="file" name="userPhoto" multiple />
  <input type="submit" value="Upload Image" name="submit">
  <input type='text' id='random' name='random'>
  <br>
  <span id="status"></span>
</form>

<script>
  $(document).ready(function () {
    $('#uploadForm').submit(function () {
      $("#status").empty().text("File is uploading...");
      $(this).ajaxSubmit({
        error: function (xhr) {
          status('Error: ' + xhr.status);
        },
        success: function (response) {
          console.log(response)
          $("#status").empty().text(response);
        }
      });
      return false;
    });
  });
</script>

index.js

app.post('/multerFile', function (req, res) {
    console.log("hi i am multer function")
    var storage = multer.diskStorage({
        destination: 'C:/Users/chandra/Documents/project/node_project/public'
    });
    var upload = multer({ storage: storage }).array('userPhoto', 2);

    upload(req, res, function (err) {
        if (err) {
            console.log(err);
            return res.end("Error uploading file.");
        } else {
            console.log(req.body)
            console.log(req.files);
            req.files.forEach(function (f) {
                console.log(f);
                // and move file to final destination...
            });
            res.end("File has been uploaded");
        }
    });
});

我试过了:

Express, Multer, BodyParser req.body empty array

multer req.body showing empty always

https://github.com/expressjs/multer/issues/351

https://github.com/expressjs/multer/issues/391

我按照这个 multer 教程进行操作

https://codeforgeek.com/2016/01/multiple-file-upload-node-js/

我无法理解我做错了什么?

请帮忙。

提前致谢

【问题讨论】:

  • 您是否尝试过使用一个文件而不上传多个文件,如果没有尝试从您的文件输入中删除multiple 标志,然后再试一次,看看是否再次出现错误
  • @JanithKasun 我尝试使用单个文件。现在我可以在 req.files 中看到文件的详细信息,并且显示成功消息(文件已上传..),但我无法在目标文件夹中找到文件。

标签: javascript node.js jquery-file-upload multer


【解决方案1】:

首先,.ajaxSubmit() 不是核心的 jQuery 函数。你需要jQuery Form Plugin,我不知道你是否像下面这样导入它:

<script src="http://malsup.github.com/jquery.form.js"></script> 

最简单的方法是不使用这样的插件:

$('#uploadForm').submit(function() {

  $("#status").empty().text("File is uploading...");

  var formData = new FormData($('#uploadForm')[0]);

  $.ajax({
      type: 'POST',
      url: '/multerFile',
      data: formData,
      success: function(response) {
          console.log(response)
          $("#status").empty().text(response);         
      },
      contentType: false, // Prevent jQuery to set the content type
      processData: false  // Prevent jQuery to process the data    
  });

  return false;

});

现在在您的后端,您的目的地最好是(在您的公共文件夹中上传一个文件夹):

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
       cb(null, './public/uploads/')
    },
});

【讨论】:

  • 感谢您为我提供此解决方案,但它不起作用。当我上传时,即使文件进入 req.files 也没有发生错误,但它没有存储在 ./public/uploads/ 或任何地方
  • 同样的问题...看不到上传的文件
【解决方案2】:

我刚刚将存储更改为

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

而且它运行良好..

【讨论】:

  • 我刚刚更换了存储空间
  • 啊文件名。很好。
猜你喜欢
  • 1970-01-01
  • 2017-01-28
  • 2019-11-06
  • 1970-01-01
  • 2020-08-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-14
相关资源
最近更新 更多