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

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

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

正式进入主题

先看看怎么从html页面中发送文件,回答是:使用 FormData

FormData使用h5新添加的一个对象,可以用来包装要发送的数据,一个例子

<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>

如上所述,你就已经发送了

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

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

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

“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默认是四个”-“加一串随机数。
在最后也要添加一个分界,不一样的是在分界的前后各加了两个”-“,表示数据发送完毕。

至此上传篇结束了

    原文作者:l2xBrain
    原文地址: https://segmentfault.com/a/1190000007194738
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞