使用 Ajax 向 NodeJs 发送参数和文件答案

【问题标题】：Send arguments and file with Ajax to NodeJs使用 Ajax 向 NodeJs 发送参数和文件
【发布时间】：2018-08-08 16:17:41
【问题描述】：

我的代码有问题，我看不出问题出在哪里。

我有这个 AJAX 部分，它从表单和参数中获取文件并将其发送到我的 nodejs 服务器：

var layerID = 2;
var formData = new FormData($("#formid")[0]);
formData.append('layer', layerID);
  $.ajax({
     url: "http://localhost:3000/file-upload",
     type: 'POST',
     data: formData,
     cache: false,
     contentType: false,
     processData: false
  });

我有这部分与 express 应该接收文件和参数：

app.use(bodyParser.urlencoded({
   extended: false
}))

app.post('/file-upload', function (req, res) {
  console.log('params: ' + req.params);
    console.log('body: ' + req.body);
    console.log('query: ' + req.query);
  upload(req, res, function (err) {
    if (err) {
      errorHandler
      return
    } else {
      successHandler
    }
  })
})

我的问题是我正确接收了文件，但在我的 nodejs 服务器中没有收到参数“层”。

【问题讨论】：

标签： javascript ajax express post

【解决方案1】：

您正在发布多部分数据，但您只有 urlencoded 数据的正文解析器。

查看body parser的文档：

这不处理多部分实体，因为它们的复杂性和通常大的性质。对于多部分实体，您可能对以下模块：

busboy 和 connect-busboy

多方和连接多方

强大

穆特

【讨论】：

上传部分是multer的用法。 var upload = multer({storage: storage]).single('photo') in storage 我用 multer.diskStorage 声明目标和文件名。

【解决方案2】：

您可以使用multiparty 之类的包以下列方式解析多部分数据。还有其他的包。

后端代码

const multiparty = require('multiparty');

         // Define POST route
 app.post('/file-upload', function (req, res) {
     const form = new multiparty.Form();

     form.parse(request, async (error, fields, files) => {
       if (error) throw new Error(error);

       try {
         const path = files.file[0].path;
         const layer = fields && fields.layer && fields.layer[0]
         const buffer = fs.readFileSync(path);

         // TODO 

         return response.status(200).send(data);
       } catch (error) {
         return response.status(400).send(error);
       }
     });
 }

您可以这样使用它。您可以从字段中读取。

客户代码

const formData = new FormData();
formData.append('file', fileObj);

uploadHandler(formData) // this function will make an API call

现在您将能够获得files.file[0]

【讨论】：

我试过你的代码，现在它说 files.file[0] 是未定义的，我必须用多方以新的方式发送图片吗？
不，我将更新答案以获取客户端代码。顺便说一句，你能检查一次files 对象吗？

【解决方案3】：

我找到了解决方案，解决方案是简单地将我的 req.body 日志移动到上传函数中并这样调用它：console.log("layer: " + req.body['layer']);

【讨论】：