如何使用enctype ="multipart/form-data"查看表单数据?在Chrome调试器中 [英] How to see form data with enctype = "multipart/form-data" in Chrome debugger

问题描述

我正在尝试在Chrome调试器中可视化表单数据.数据是通过发送数据的方式从中加载文件并发送一些文本的.像这样的东西:

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>

如果我使用开发工具探索POST请求的标头，则看不到表单数据部分，但发现:

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.

如何在Chrome调试器中查看有关提交的some_text的实际数据.

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

推荐答案

我已在以下平台上进行了测试:Chrome 79.0.3945.130(官方内部版本)(64位)，Windows10.我确认该问题仍然存在. Chrome的最新版本(截至2020年1月22日).

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).

确切地说，我在Chrome 79.0.3945.130(以及Chromium Edge 79.0.309.68)中发现的问题如下:

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. 对于多部分/表单数据POST请求，如果我们未指定要上传的任何文件并点击表单提交按钮，则可以在网络工具的标题标签下看到表单数据"部分. 表单数据"部分列出了所有常规表单字段，例如，下图显示了表单字段< input type ="text" name ="title" value ="hello Chrome"/>，文件字段显示了没什么，因为我没有上传任何文件.

1. 对于多部分/表单数据POST请求，如果我们实际上传文件，则无论文件大小(例如0B)如何，整个表单数据"部分都会消失，包括常规表单字段！请参见下图，其中我折叠了标题下的所有部分以说明要点.

我同意出于性能原因隐藏文件内容是很有意义的，如本

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.

在FireFox中，我们在F12开发人员工具>网络>参数下查看所有表单数据和上载的文件内容.在以下示例中，我上传了内容为file.txt的内容:hello Firefox from file.txt.

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.

因此Firefox在Chrome解决此问题之前提供了一个临时解决方案.

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

这篇关于如何使用enctype ="multipart/form-data"查看表单数据?在Chrome调试器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！