Jquery formdata post with express js答案

【问题标题】：Jquery formdata post with express jsJquery formdata post with express js
【发布时间】：2021-06-19 10:40:15
【问题描述】：

我想提交一个包含文件类型输入和普通输入的表单数据，并在快递请求中接收它。我正在使用 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 可用，但我无法接收快速请求中的文本类型输入。

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

【问题讨论】：

标签： html jquery ajax express multer

【解决方案1】：

您能否在创建 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;
  
})

【讨论】：