在上一节我们把测试用的网页环境搭建好了，今天我们就来抓包分析一下multipart/form-data多部分文件上传的过程。
首先，打开fiddler抓包软件，接着打开upload.html网页，然后选择一个文件，我们使用图片文件来演示，这里打开的是桌面的图片文件wx.jpg，由于输入口太小没有显示全部路径，我们只截取了部分路径。如图：
上传图片文件
然后我们点击后面的upload按钮开始上传文件。服务器返回响应，显示上传到服务器时的临时文件名和移到之后的文件名，说明上传是成功的，如图：
上传成功
那现在来看看我们fiddler抓包软件抓取的数据报文，首先是请求报文：
请求报文
报文里最重要的就是：
Content-Type: multipart/form-data; boundary=---------------------------7e21c311401cc
内容类型为multipart/form-data多部分表单数据，后面的boundary是每部分的分隔线，之所以多部分就是这个boundary把数据分隔成多个部分的。这个值是一个随机字符串，不能跟上传的数据一样。
然后就是每个部分的数据了，这里有两个部分的数据。以上面的boundary分隔线开始，第一部分数据如下：
-----------------------------7e21c311401cc
Content-Disposition: form-data; name="file1"; filename="wx.jpg"
Content-Type: image/jpeg
..............省略掉。
首先就是boundary分割线，但是你有没有发现在前面多了“--”两个横线，是的，每个部分在原有boundary的基础上在前面多加上两个“--”横线。里面的name是表单的input的name值“file1”，“filename”是上传的文件名"wx.jpg"，不带路径的。“Content-Type”字段是文件的类型，到底是图片，还是压缩文件等，这里上传的是jpg图片，所以是“image/jpeg”。下面就是一个空行，把文件的真正数据分隔开来，文件的数据是二进制数据。说白了也是键值对的形式。“file1""文件二进制数据"。
第二部分的数据其实就是那个upload按钮的数据，按钮的名字叫“sub”，对应的值是“upload”。键值对就是"sub""upload"。
不要忘记了还要一个结束的标志，它是以“--boundary--"这种样子，两个"--"开始加上boundary再加上“--”结束的。
明白了报文的结构，我们只需要构造一个这种类型的报文发送给服务器就可以把文件上传成功了。下一节代码演示如何上传文件到服务器端。
举报/反馈