http不使用Form表單傳送檔案資料和非檔案資料(上傳篇)

l2xBrain發表於2019-02-16
HTTPORM

這裡要說一下，本篇我重點說的是上傳，至於下載，檢視對應的下載篇

在原來，檔案的上傳是使用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=“資料的鍵”(換行)

(換行)
資料的值(“換行”)

注意每一個boundary的前面要加兩個“－”
對於檔案的資料格式為:

—boundary(換行)
Content-Disposition:form-data;name=“資料的鍵”;filename=“檔名”(換行)


Content-Type:*/*(換行)


檔案的二進位制編碼

用我們前面的例子，傳送的資料為:

--boundary
Content-Disposition:form-data;name="username"


123456
--boundary
Content-Disposition:form-data;name="password"


67890
--boundary
Content-Disposition:form-data;name="picture";filename="上傳的檔名"


Content-Type:image/jpeg;
對圖片進行二進位制編碼後的資料
--boundary--

上面的boundary是一個變數，可以是一串隨機數,不過FormData預設是四個”-“加一串隨機數。
在最後也要新增一個分界，不一樣的是在分界的前後各加了兩個”-“,表示資料傳送完畢。

至此上傳篇結束了

相關文章