How to see form data with enctype = “multipart/for

问题:

I'm trying to visualize form data in Chrome Debugger. Data are sent through a from which loads a file and sends some text. Something like this one:

<form action="url" enctype="multipart/form-data" method="post">
     <input type="file" name="file"> <br>
     <input type="text" name="some_text">
</form>

If I explore the headers of the POST request with dev tools, I do not see form data section but I just find:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryXGBFWL5ab6g5XoFN

that, according to this post is a kind of separator used to segregate data. However, I do not see anything else about submitted data.

How can I see actual data about the filed some_text in Chrome Debugger.

回答1:

I tested on my platform: Chrome 79.0.3945.130 (Official Build) (64-bit), Windows 10. I confirm that this problem remains on the up to date version of Chrome (as of 1/22/2020).

To be precise, the problem I found in Chrome 79.0.3945.130 (and Chromium Edge 79.0.309.68 as well) is as follows:

1. For a multipart/form-data POST request, if we don't specify any file to upload and hit the form submit button, we do see the "Form Data" section under Network tool's headers tab. The "Form Data" section lists all regular form fields, e.g., a form field <input type="text" name="title" value="hello Chrome"/> is shown in the following pic, and the file field shows nothing because I didn't upload any file.

2. For a multipart/form-data POST request, if we actually upload a file, regardless of its size (such as 0B), the entire "Form Data" section disappears, including regular form fields! See the following pic in which I collapsed all sections under Headers to demonstrate the point.

I agree it makes good sense to hide the file content for performance reasons as described in this question and this discussion, but it makes no sense to hide all regular form fields as well. I believe this is a Chrome bug.

In FireFox, we see all Form Data and uploaded file content under F12 dev tools > Network > Params. In the following example, I uploaded file.txt with the content: hello Firefox from file.txt.

So Firefox offers a temporary solution before Chrome addresses this issue.

回答2:

The problem still exists with chrome versions 77 and 78. It is working with tools like Fiddler.

See the answers to this question: Should a "multipart/form-data" POST request actually contain a string with the data of an uploaded image?

They suggest to use Fiddler. Chrome developer tools do not show the data, because the developers chose not to for performance reason and acknowledge this is a limitation of current design.

See also this Chrome bug report.

回答3:

Just looking at the Headers tab in the Network tab in chrome dev tools shows me the entered data (Chrome Version 73):

Keep in mind that in order for requests to show up in the Network tab you have to open the chrome devtools before the request happens.