アップロードファイルmultipart/form-dataの詳細解析

11881 ワード

アップロードファイルはフロントエンドで一般的なニーズですが、なぜアップロードファイルは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>