第7天 Post方法与上传——上传的数据结构

doramart2015-10-16 15:52:19

表单上传来的请求，也是采用post方法，不过表单的写法和发送来的数据结构都不同。

上传的数据结构

表单上传来的请求，也是采用post方法，不过表单的写法和发送来的数据结构都不同。表单的写法如下：

<form method="post" action=" ... "  enctype="multipart/form-data">

要让表单支持上传，还必须加入 enctype="multipart/form-data" 属性，至于上传的数据结构，我们需要编写一个表单界面，然后服务器端读取请求信息体，来看一下数据结构。

表单代码如下：

<!doctype html>
<html>
    <head>
        <title>write article</title>
    </head>
    <body>
        <form action="http://localhost:3000/post" enctype="multipart/form-data" method="post">
            <p><input type="text" name="title"/></p>
            <p><textarea type="text" name="content" ></textarea></p>
            <p><input type="file" name="img"/></p>
            <input  type="submit" />
        </form>
    </body>
</html>

然后编写服务器端代码：

var fk = require("../..")
   ,App = fk.App
   ,app = new App


    app.post("/post",function(req,res){

        var data = “”;
        req.on("data",function(chunk){
            data += chunk;
        })
        req.on("end",function(){
            console.log(data.toString());
        })

    })


    app.listen(3000)

打开表单页面，输入如下信息：

提交后，在服务器终端会打印出：

-----------------------------7ddc8352a02ea
Content-Disposition: form-data; name="title"

title
-----------------------------7ddc8352a02ea
Content-Disposition: form-data; name="content"

content
-----------------------------7ddc8352a02ea
Content-Disposition: form-data; name="img"; filename="favicon2.ico"
Content-Type: image/x-icon

（图片数据略）
-----------------------------7ddc8352a02ea--

看起来很奇怪，不过仔细分析就会发现 ------7ddc8352a02ea 表示数据起始，------7ddc8352a02ea-- 表示数据结束。下面把\r\n也显示出来。

-----------------------------7ddc8352a02ea \r\n
Content-Disposition: form-data; name="title" \r\n\r\n

title \r\n
-----------------------------7ddc8352a02ea \r\n
Content-Disposition: form-data; name="content" \r\n\r\n

content \r\n
-----------------------------7ddc8352a02ea \r\n\r\n
Content-Disposition: form-data; name="img"; filename="favicon2.ico" \r\n
Content-Type: image/x-icon \r\n\r\n

（图片数据略） \r\n
-----------------------------7ddc8352a02ea-- \r\n

通过这样的分析，我们知道了Content-Disposition: form-data; name="content" 信息头和信息体之间是 \r\n\r\n。

这里还有个问题，就是 ------7ddc8352a02ea 这个信息分割字符串是每次提交都不同，那如何得到他呢？可以通过，req.headers["content-type"] 得到，不过还需要一些处理。

到此为止，我们分析并收集了一些信息，对于扩展post.js插件很有帮助。大体分析就到这里，下一节将实际编码，来扩展插件功能。

所有文章未经授权禁止转载、摘编、复制或建立镜像，违规转载法律必究。

举报邮箱：doramart@qq.com