Conten-type的應用

七姊薔薇發表於2019-01-14

Content-Type

實體頭部用於指示資源的MIME型別 media type 。 Content-Type 實體頭部用於指示資源的MIME型別 media type 。

設定格式

型別格式:type/subtype(;parameter)? type

樣例
Content-Type:application/json;charset=GBK  
複製程式碼

type 主型別:任意的字串,如text,如果是*號代表所有;

subtype 子型別:任意的字串,如html,如果是*號代表所有;

parameter 可選:一些引數,如Accept請求頭的q引數, Content-Type的 charset引數。

常見的媒體格式型別如下:

text/html : HTML格式
text/plain :純文字格式      
text/xml :  XML格式
image/gif :gif圖片格式    
image/jpeg :jpg圖片格式 
image/png:png圖片格式
複製程式碼

以application開頭的媒體格式型別:

application/xhtml+xml :XHTML格式
application/xml     : XML資料格式
application/atom+xml  :Atom XML聚合格式    
application/json    : JSON資料格式
application/pdf       :pdf格式  
application/msword  : Word文件格式
application/octet-stream :二進位制流資料(如常見的檔案下載)
application/x-www-form-urlencoded :<form encType=””>中預設的encType,form表單資料被編碼為key/value格式傳送到伺服器(表單預設的提交資料的格式
複製程式碼

另外一種常見的媒體格式是上傳檔案之時使用的:

multipart/form-data :需要在表單中進行檔案上傳時,就需要使用該格式
複製程式碼

以上就是我們在日常的開發中,經常會用到的若干content-type的內容格式。


angularJS 檔案上傳 ——Multipart/form-data

var uploadFile=document.querySelector("#uploadFile").files[0];
//jquery獲取$("#uploadFile").prop("files")[0];
var formData = new FormData();
formData.append('fileTypeId', fileType);//其他需要上傳的欄位
formData.append('file', uploadFile);//檔案
 $http({
           url:ex.websitemonitor+"files/upload",
           method:"post",
           headers: {'Content-Type': undefined},//使用angular上傳一定要加上這一句,不然傳給後臺的是空的。
           data: formData,
        }).success(function (result) {}
複製程式碼

為什麼要使用配置'Content-Type': undefined?

首先是因為angularJS預設的Content-Type是application/json,所以要自己設定來覆蓋預設的application/json,不僅要設定為multipart/form-data,而且引數 boundary 也是必需的, 參考:developer.mozilla.org/zh-CN/docs/…

設定boundary是一件麻煩的事情,可以交給瀏覽器去做,設定為 'Content-Type': undefined? 可以讓瀏覽器自動識別到型別以及boundary邊界

ajax上傳檔案

var uploadFile=document.querySelector("#uploadFile").files[0];
//jquery獲取$("#uploadFile").prop("files")[0];
var formData = new FormData();
formData.append('fileTypeId', fileType);//其他需要上傳的欄位
formData.append('file', uploadFile);//檔案
$.ajax({
    url:"",
    type:"post",
    data:formData,
    success:function(){},
    error:function(){}
    })//沒有什麼特別需要注意的
複製程式碼

參考文獻:blog.csdn.net/isxixi/arti…