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

2024年1月29日 196次阅读 来源: l2xBrain

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

在原来，文件的上传是使用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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞