アップロードファイルmultipart/form-dataの詳細解析
11881 ワード
アップロードファイルはフロントエンドで一般的なニーズですが、なぜアップロードファイルは
起源:multipart/form-data定義ソース
Since file-upload is a feature that will benefit many applications, this proposes an extension to HTML to allow information providers to express file upload requests uniformly, and a MIME compatible representation for file upload responses.
1867ドキュメントの概要では、ファイルアップロードが一般的なニーズとして説明されており、現在(1995年)のhtmlのformフォームフォーマットではサポートされていないため、このニーズに対応するmime typeが提案されている.
The encoding type application/x-www-form-urlencoded is inefficient for sending large quantities of binary data or text containing non-ASCII characters. Thus, a new media type,multipart/form-data, is proposed as a way of efficiently sending the values associated with a filled-out form from client to server.
1867ドキュメントには、従来の
On the other hand, the 'multipart' mechanisms are well established, simple to implement on both the sending client and receiving server, and as efficient as other methods of dealing with multiple combinations of binary data.
ドキュメントでは、multipartというメカニズムを使用する理由も説明しています.Multipartメカニズムの定義は『RFC 1314-A File Format for the Exchange of Images in the Internet』の7.2 The Multipart Content-Typeセクションにある
しかし、この1867ドキュメントではmultipart/form-dataの具体的なフォーマットについてはあまり詳しく書かれていません.第6部の【Examples】においてのみ基本的な例が与えられたため、1998年にはHTTPプロトコルの下でファイルを転送するだけでなく、メールでファイルを転送する際のmultipart/form-dataの各部分の具体的なフォーマットを明らかにする新しい『RFC 2388:Returning Value from Forms:multipart/form-data』が追加された[1].それぞれ
4.1パッケージラインのフォーマット
4.2マルチファイルの場合はmultipart/mixedを使用する
(編集者注:どのブラウザでも複数のファイルを送信する際にこの構成は実現されていないことを実験した[2019-4-5])しかし、1通のメールを送信しfiddlerパケットを使用すると、メールソースコードフォーマットが2388ドキュメント仕様に厳格に従っていることがわかる.
インスタンス分析
以下に栗をいくつか挙げます.getメソッドとpostメソッドを使用しますが、enctypeは書かれません.つまり、デフォルトの
content-type:multipart/form-data
をリクエストヘッダとして使用しなければならないのですか?起源:multipart/form-data定義ソース
multipart/form-data
は、最初に「RFC 1867:Form-based File Upload in HTML」ドキュメントによって提案された.Since file-upload is a feature that will benefit many applications, this proposes an extension to HTML to allow information providers to express file upload requests uniformly, and a MIME compatible representation for file upload responses.
1867ドキュメントの概要では、ファイルアップロードが一般的なニーズとして説明されており、現在(1995年)のhtmlのformフォームフォーマットではサポートされていないため、このニーズに対応するmime typeが提案されている.
The encoding type application/x-www-form-urlencoded is inefficient for sending large quantities of binary data or text containing non-ASCII characters. Thus, a new media type,multipart/form-data, is proposed as a way of efficiently sending the values associated with a filled-out form from client to server.
1867ドキュメントには、従来の
application/x-www-form-urlencoded
を使用せずに、なぜ新しいタイプを追加するのかも記載されています.このタイプは、大規模なバイナリデータまたは非ASCII文字を含むデータを転送するのに適していないためです.通常、フォームデータをurl符号化してバックエンドに転送するタイプですが、バイナリファイルはもちろん一緒に符号化できません.そのため、multipart/form-data
が誕生し、有効な転送ファイルに特化しています.On the other hand, the 'multipart' mechanisms are well established, simple to implement on both the sending client and receiving server, and as efficient as other methods of dealing with multiple combinations of binary data.
ドキュメントでは、multipartというメカニズムを使用する理由も説明しています.Multipartメカニズムの定義は『RFC 1314-A File Format for the Exchange of Images in the Internet』の7.2 The Multipart Content-Typeセクションにある
しかし、この1867ドキュメントではmultipart/form-dataの具体的なフォーマットについてはあまり詳しく書かれていません.第6部の【Examples】においてのみ基本的な例が与えられたため、1998年にはHTTPプロトコルの下でファイルを転送するだけでなく、メールでファイルを転送する際のmultipart/form-dataの各部分の具体的なフォーマットを明らかにする新しい『RFC 2388:Returning Value from Forms:multipart/form-data』が追加された[1].それぞれ
3.Definition of multipart/form-data
multipart/form-dataの定義;4.Use of multipart/form-data
具体的な使用形式と方法についてより詳細に説明した.第4章は以下のとおりである.4.1パッケージラインのフォーマット
4.2マルチファイルの場合はmultipart/mixedを使用する
(編集者注:どのブラウザでも複数のファイルを送信する際にこの構成は実現されていないことを実験した[2019-4-5])しかし、1通のメールを送信しfiddlerパケットを使用すると、メールソースコードフォーマットが2388ドキュメント仕様に厳格に従っていることがわかる.
POST https://outlook.office365.com/Microsoft-Server-ActiveSync?jAEECBBv8Usp+29k8LM6azAOecgZBAAAAAALV2luZG93c01haWz/AwEMAQ== HTTP/1.1
Cache-Control: no-cache
Connection: Keep-Alive
Pragma: no-cache
Content-Type: application/vnd.ms-sync
Authorization: ...
X-MS-WL: WindowsPhone/8.0
X-WLAS-Tracing: true
Content-Length: 1498610
Host: outlook.office365.com
Cookie: [email protected]
j EQoid{0:b} P ۻWMIME-Version: 1.0
To: "[email protected]"
From:
Subject: =?utf-8?Q?test=E9=82=AE=E4=BB=B6=E6=A0=BC=E5=BC=8F?=
Date: Fri, 5 Apr 2019 19:43:35 +0800
Importance: normal
X-Priority: 3
Content-Type: multipart/mixed;
boundary="_8A0F7060-4F31-4015-9BED-E2D8315920AF_"
--_8A0F7060-4F31-4015-9BED-E2D8315920AF_
Content-Type: multipart/alternative;
boundary="_997001FE-F8E8-4F97-ACC0-BBA66B0710A5_"
--_997001FE-F8E8-4F97-ACC0-BBA66B0710A5_
Content-Transfer-Encoding: base64
Content-Type: text/plain; charset="utf-8"
DQoNCuWPkemAgeiHqiBXaW5kb3dzIDEwIOeJiOmCruS7tuW6lOeUqA0KDQo=
--_997001FE-F8E8-4F97-ACC0-BBA66B0710A5_
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"
....
--_997001FE-F8E8-4F97-ACC0-BBA66B0710A5_--
--_8A0F7060-4F31-4015-9BED-E2D8315920AF_
Content-Type: image/png; name="upload.png"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="upload.png"
...
インスタンス分析
以下に栗をいくつか挙げます.getメソッドとpostメソッドを使用しますが、enctypeは書かれません.つまり、デフォルトの
application/x-www-form-urlencoded
表のデータフォーマットでフォームリクエストを行います.
"utf-8">
get , application/x-www-form-urlencoded
<form method="<span" class="hljs-string">"get" action=<span class="hljs-string">"xxx"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"name"</span>>name</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"name"</span> name=<span class="hljs-string">"name"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"file"</span>>file</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"file"</span> id=<span class="hljs-string">"file"</span> name=<span class="hljs-string">"file"</span> />
<input class="hljs-built_in"/>type=<span class="hljs-string">"submit"</span> value=<span class="hljs-string">"submit"</span> name=<span class="hljs-string">"submit"</span>>
</form>
post , application/x-www-form-urlencoded
<form method="<span" class="hljs-string">"post" action=<span class="hljs-string">"xxx"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"name"</span>>name</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"name"</span> name=<span class="hljs-string">"name"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"file"</span>>file</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"file"</span> id=<span class="hljs-string">"file"</span> name=<span class="hljs-string">"file"</span> />
<input class="hljs-built_in"/>type=<span class="hljs-string">"submit"</span> value=<span class="hljs-string">"submit"</span> name=<span class="hljs-string">"submit"</span>>
</form>
<span class="copy-code-btn"></span></code></pre>
<p>windows ( iis 1333 )vs code go live , fiddler 。 linux :<code>while :; do clear; nc -l localhost 1333; sleep 2; done</code> 。 :</p> 1.1
<p> post get url , , , <code>application/x-www-form-urlencoded</code> 。</p>
<p> <code>enctype='multipart/form-data'</code>, post get :</p>
<pre><code> get , multipart/form-data
<form method="<span" class="hljs-string">"get" action=<span class="hljs-string">"xxx"</span> enctype=<span class="hljs-string">"multipart/form-data"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"name"</span>>name</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"name"</span> name=<span class="hljs-string">"name"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"file"</span>>file</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"file"</span> id=<span class="hljs-string">"file"</span> name=<span class="hljs-string">"file"</span> />
<input class="hljs-built_in"/>type=<span class="hljs-string">"submit"</span> value=<span class="hljs-string">"submit"</span> name=<span class="hljs-string">"submit"</span>>
</form>
post , application/x-www-form-urlencoded
<form method="<span" class="hljs-string">"post" action=<span class="hljs-string">"xxx"</span> enctype=<span class="hljs-string">"multipart/form-data"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"name"</span>>name</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"text"</span> id=<span class="hljs-string">"name"</span> name=<span class="hljs-string">"name"</span>>
<label class="hljs-keyword">for=<span class="hljs-string">"file"</span>>file</label>
<input class="hljs-built_in"/>type=<span class="hljs-string">"file"</span> id=<span class="hljs-string">"file"</span> name=<span class="hljs-string">"file"</span> />
<input class="hljs-built_in"/>type=<span class="hljs-string">"submit"</span> value=<span class="hljs-string">"submit"</span> name=<span class="hljs-string">"submit"</span>>
</form>
<span class="copy-code-btn"></span></code></pre> 1.2
<p> get , 。 post <code>multipart/form-data</code> 。</p>
<p> boundtry 。 multipart , , <code>content-desposition</code> , <code>form-data</code>, <code>name</code> , , <code>filename</code> 。<code>content-type</code> , , <code>text/plain</code>。multipart part , part 。</p>
<h2 class="heading"> </h2>
<ol>
<li> RFC 1867: Form-based File Upload in HTML</li>
<li>RFC 2388: Returning Values from Forms: multipart/form-data</li>
<li> enctype="multipart/form-data"</li>
<li> x-www-form-urlencoded multipart/form-data</li>
<li>post Upload multipart/form-data </li>
<li> :MIME </li>
<li>W3C :17 Forms</li>
<li>7.2 The Multipart Content-Type(1992)</li>
</ol>
</div>
<p> :https://juejin.im/post/5c9f4885f265da308868dad1</p>
</div>
</div>
</div>
</div>