http不使用Form表單發送文件數據和非文件數據(上傳篇)

kidsamong 發布于2019-08-01 15:50 / 1560人閱讀

摘要：在最后也要添加一個分界，不一樣的是在分界的前后各加了兩個表示數據發送完畢。至此上傳篇結束了

這里要說一下，本篇我重點說的是上傳，至于下載，查看對應的下載篇

在原來，文件的上傳是使用form表單去提交，有的時候為了上傳文件，還要專門為上傳文件寫一個form表單上傳文件，十分的麻煩，探索宇宙已經很累了，哪有時間浪費啊！！^_^

正式進入主題

先看看怎么從html頁面中發送文件，回答是：使用 FormData

FormData使用h5新添加的一個對象，可以用來包裝要發送的數據，一個例子


    
        上傳文件

如上所述，你就已經發送了

{
    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默認是四個"-"加一串隨機數。
在最后也要添加一個分界，不一樣的是在分界的前后各加了兩個"-",表示數據發送完畢。

至此上傳篇結束了

云服務器 GPU云服務器 form表單文件上傳 HTTP文件上傳文件上傳表單 from表單上傳文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50154.html

http不使用Form表單發送文件數據和非文件數據(下載篇)

摘要：本文主要在后端接收前端給的數據，前端的上傳篇，查看對應的上傳篇如果你想馬上使用，那么你可以去中使用或者可以快速的解決你的問題，這里不使用包，完成下載的功能首先需要知道傳過來的數據長什么樣子，這個非常重要如果這里有疑問，你可以查看對應的上傳篇本文主要在后端接收前端給的FormData數據，前端的上傳篇，查看對應的上傳篇如果你想馬上使用，那么你可以去npm中使用multer或者form...

int64 2019-08-01 15:50 評論0 收藏0
JS基礎篇--JS之表單提交時編碼類型enctype詳解

摘要：格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。例如下面這段代碼最終發送的請求是這種方案，可以方便的提交復雜的結構化數據，特別適合的接口。簡介 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。 ...

ad6623 2019-08-21 17:26 評論0 收藏0
form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0