HttpClient--Multipart Request

Posted 2023-04-27

参考技术A 这里主要记录一下如何使用HttpClient来发送Multipart Request

HttpClient官方网站
HttpComponents包括三个模块：HttpCore、HttpClient、Asynch HttpClient

    其中HttpCore是低层级的Http通信元件，用于实现自定义的客户端和服务端的HTTP通信服务。HTTPCore支持BIO和NIO两种IO模式。其中BIO，也就是阻塞IO适用于数据密集型低延迟场景；NIO适用于数据吞吐量的重要性低于高并发的高延迟场景。

    HTTPClient是基于HttpCore的兼容HTTP/1.1的代理实现，它还支持客户端身份验证，HTTP状态管理，HTTP连接管理。

    Asynch HTTPClient是HttpClient的补充，适用于处理高并发的情况。

HttpClient发送Multipart Request

step1. 获取HttpClient实例 HttpClient httpClient = HttpClients.createDefault();
step2. 建立HttpPost连接
step3. 设置Post Entity
step4. HttpClient execute post
step5. 获取response
step6. 获取response entity
    注意其中的设置POST Entity，有几个xxxBody，这几个类来自于Apache提供的package：
org.apache.http.entity.mime.content
其中包含以下四种Body：
ByteArrayBody Binary body part backed by a byte array.
FileBody Binary body part backed by a file.
InputStreamBody Binary body part backed by an input stream.
StringBody Text body part backed by a byte array.
    我们可以根据具体情况来选择要往Post中添加，如果有多个文件则每个文件都要addPart一次，其实HTTPEntity有很多的实现提供了类似于addBinaryBody、addStringBody这样的方法，针对性更强。

节点 js multer 文件上传不起作用。 req.file 和 req.files 始终未定义

【中文标题】节点 js multer 文件上传不起作用。 req.file 和 req.files 始终未定义

【英文标题】：node js multer file upload not working. req.file and req.files always undefined

【发布时间】：2018-08-04 03:02:54

【问题描述】：

我正在尝试将文件上传到我的服务器，但 req.file 和 req.files 在我的 POST REST 端点上始终未定义。

我要上传的内容是一个“.dat”文件，我期待一个 json 响应。

这是我的代码：

服务器端：

var express = require('express');
var multer  = require('multer')
var upload = multer( dest: 'uploads/' )

var app = express()

app.post('/creoUpload', upload.single('uploadFileField'), function(req, res, next) 
  console.log("req.file = ",JSON.stringify(req.file)); //is undefined
  console.log("req.files = ",JSON.stringify(req.files)); //also undefined
);

客户端：

<form id="creoUploadForm" action="/creoUpload" enctype="multipart/form-data" method="post">
    <input type='file' name='uploadFileField'><br><br>
    <input type='submit' value='Upload'/>
</form>

JS：

$( "#creoUploadForm" ).submit(function( event ) 
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax(
          url: '/creoUpload',
          type: 'POST',
          data: formData,
          async: true,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) 
              console.log("RETURN DATA IS: ",returndata);
          ,
          error: function (err) 
              console.log("ERROR: ",err);
          
    );
);

我一直在田地里玩耍，但它不起作用..有人知道我在这里做错了什么吗？

我正在关注https://www.npmjs.com/package/multer的示例

版本：

Express 版本：4.12.0 节点版本：6.5.0 jQuery：1.12.1

谢谢！

【问题讨论】：

在您的 HTML 中，您可以尝试从表单标签中删除操作，并将 formaction="/creoupload" 添加到提交按钮吗？

尝试使用fetch Api 发送帖子请求

【参考方案1】：

我也有同样的问题，如果您查看 Error Handling 部分的文档，还有另一种实现方式，这对我有用。代码将是这样的：

var express = require('express');
var multer = require('multer');
var upload = multer( dest: 'uploads/' );
var app = express();

app.post('/creoUpload', function(req, res, next) 
  upload(req, res, function (err) 
    if (err) 
      // An error occurred when uploading
      console.log('Err: ', err);
      return;
     else 
       console.log('req.file: ', JSON.stringify(req.file));  
       console.log('req.files: ', JSON.stringify(req.files));
       return;
    
  )
);

【参考方案2】：

如果req.file和req.files是undefined，那么问题是multer没有收到上传的文件，这个问题似乎与jQuery有关。

不支持使用 jQuery 'v1.12.1' 上传 FormData，它根本不会发送任何内容。 我会建议尝试使用 fetch Api 或将 jQuery 的版本更改为 3.3.1。

当我将 jQuery 版本从 v1.12.1 更改为 v3.3.1 时，我已经测试了代码并成功将文件上传到服务器。

【参考方案3】：

您正在使用 multer 作为中间件，因此在进入您的函数并打印之前，它已将图像上传到存储并从 req.files 中删除记录。

您可以通过两种方式访问​​ req.files。

使用 multer 作为 finw3 所述的函数。

另一种解决方案是：

//代码开始

var storage = multer.diskStorage(

  destination: function (req, file, cb) 

    cb(null, '/filepath')
  ,


  filename: function (req, file, cb) 

    let filename = 'filenametogive';
     req.body.file = filename

    cb(null, filename)
  
)

var upload = multer( storage: storage )

//代码结束

现在您可以访问 req.body.file 中的文件

【参考方案4】：

不要将contentType 设置为false，因为POST 方法需要contentType = 'w-xxx-form-urlencoded'，这是JQ 的默认设置。