http不使用Form表单发送文件数据和非文件数据(上传篇)

时间 2019-11-10

标签 http 不使 form 表单发送文件数据上传栏目 HTTP/TCP 繁體版

原文原文链接

这里要说一下，本篇我重点说的是上传，至于下载，查看对应的下载篇html

在原来，文件的上传是使用form表单去提交，有的时候为了上传文件，还要专门为上传文件写一个form表单上传文件，十分的麻烦，探索宇宙已经很累了，哪有时间浪费啊！！^_^后端

正式进入主题app

先看看怎么从html页面中发送文件，回答是：使用 FormData编码

FormData使用h5新添加的一个对象，能够用来包装要发送的数据，一个例子code

<body>
    <form>
        <label for="">上传文件</label>
        <input type="file" id="picture" />
        <input type="button" value="确认提交" onclick="confirm()">
    </form>
    
    <script>
        function confirm(e){
            var xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //构造FormData对象
            var formData = new FormData();
            //添加非文件数据
            formData.append("username","123456");
            formData.append("password","67890");
            //添加文件数据
            formData.append("picture",document.getElementById("picture").files[0])
            //使用POST方法发送数据
            xmlHttp.open("POST","/imageUpload",true);
            xmlHttp.send(formData)
            //返回的数据
            xmlHttp.onreadystatechange=function(){
                if (xmlHttp.readyState==4 && xmlHttp.status==200){
                    console.log(xmlHttp.responseText);
                }
            }
        }
    </script>
</body>

如上所述，你就已经发送了orm

{
    username:123456,
    password:67890,
    picture:文件数据(其实这里是将文件转换为二进制了)
}

咱们能够看见使用FormData添加数据很是的简单，特别是解决了在上传文件只能使用form表单的憋屈。
下面我要说说，使用FormData包装好的数据怎么传输的，我想这是很是有必要的，特别是当你在后端解析数据的时候，必需要知道传给后台的数据长什么样xml

使用FormData后，会将request的Content-Type设置为htm

“multipart/form-data;boundary=----"+一段随机的字母;

上面的boundary正如字面的意思同样，就是一个分界的意思，分开每个键值对数据，具体的数据格式为对象

--boundary(换行)
Content-Disposition:form-data;name=“数据的键”(换行)
\r\n(换行)
数据的值(“换行”)

注意每个boundary的前面要加两个“－”
对于文件的数据格式为:图片

—boundary(换行)
Content-Disposition:form-data;name=“数据的键”;filename=“文件名”(换行)
\r\n
Content-Type:*/*(换行)
\r\n
文件的二进制编码

用咱们前面的例子，发送的数据为:

--boundary
Content-Disposition:form-data;name="username"
\r\n
123456
--boundary
Content-Disposition:form-data;name="password"
\r\n
67890
--boundary
Content-Disposition:form-data;name="picture";filename="上传的文件名"
\r\n
Content-Type:image/jpeg;
对图片进行二进制编码后的数据
--boundary--

上面的boundary是一个变量，能够是一串随机数,不过FormData默认是四个"-"加一串随机数。
在最后也要添加一个分界，不同的是在分界的先后各加了两个"-",表示数据发送完毕。

至此上传篇结束了