时间戳

首页 > 解决方案 > Jquery formdata post with express js

html - Jquery formdata post with express js

问题描述

我想提交一个包含文件类型输入和普通输入的表单数据，并在快递请求中接收它。我正在使用 multer npm 包来保存文件。

HTML

<form  id="abc" method="POST" enctype="multipart/form-data">
   <input type="file" name="inputfile" id="inputfile">
   <input type="text" id="firstname">
   <button class="formsubmit">Submit</button>
</form>

jQuery

$(document).on('click', '.formsubmit', function(req, res){
    var form = $('#abc')[0];
    var data = new FormData(form);
    data.append("name", $('#firstname').val());
    $.ajax({
        method: 'post',
        url: '/sendformdata',
        data: data,
        contentType: false, 
        dataType: 'json',
        cache : false,
        processData: false,
        success: function(res) {
            console.log("Success"); 
        },
        error: function(err) {
            console.log("Error");
        }
}

表达

app.post('/sendformdata',(req,res) => {
   console.log("body: ", req.body);    // output: {}
   console.log("body: ", req.query);   // output: {}
   console.log("body: ", req.fields);  // output: undefined

   upload(req,res,function(err){
       if(err){
           console.log(err)
       }else{
           path = req.file.path   
       }
   })
}

var upload = multer({
    storage: Storage
}).single("inputfile");

尽管 req.file 可用，但我无法接收快速请求中的文本类型输入。

请注意是否有人有更好的软件包或解决方案来上传文件。我只是不想在表单标签中使用操作来捕获字段。

标签： htmljqueryajaxexpressmulter

解决方案

如果那里实际上有任何数据，您能否检查一下创建 newFormData 的时间？还要检查网络选项卡以查看您的请求发送到服务器的内容。

确保您的路由和控制器设置正确，我留下并举例说明如何做到这一点。

   // SET STORAGE
    const storage = multer.diskStorage({
      destination: function (req, file, cb) {
        cb(null, 'uploads')
      },
      filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
      }
    })
     
    const upload = multer({ storage: storage })

正确设置路由和控制器。我会建议您将路线放在一个文件中，将控制器放在另一个文件中。但取决于你。

  app.post('/uploadfile', upload.single('fileNameInForm'), (req, res, next) => {
  const { file, body } = req;
  
})

推荐阅读