axios上傳文件

㈠ 常見的四種post提交數據編碼格式

HTTP/1.1 協議規定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務端提交數據，本文主要討論 POST 提交數據的幾種編碼方式。

協議規定 POST 提交的數據必須放在消息主體（entity-body）中，但協議並沒有規定數據必須使用什麼編碼方式。但是，數據發送出去，還要服務端解析成功才有意義。

服務端通常是根據請求頭（headers）中的 Content-Type 欄位來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。POST 提交數據方案，包含了 Content-Type 和消息主體編碼方式兩部分。下面就正式開始介紹它們。

這應該是最常見的 POST 提交數據的方式了。瀏覽器的原生 form 表單，如果不設置 enctype屬性，那麼最終就會默認以 application/x-www-form-urlencoded 方式提交數據。

在POST提交數據中Content-Type 被指定為 application/x-www-form-urlencoded；提交的數據按照 key1=val1&key2=val2 的方式進行編碼，key 和 val 都進行了 URL 轉碼。大部分服務端語言都對這種方式有很好的支持。很多時候，我們用 Ajax 提交數據時，也是使用這種方式。

這也是一個常見的 POST 數據提交的方式。我們使用表單上傳文件時，必須讓 form 的 enctype 等於這個值。這種方式一般用來上傳文件，各大服務端語言對它也有著良好的支持。上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的。

application/json 這個 Content-Type 作為響應頭大家肯定不陌生。

實際上，現在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化後的 JSON 字元串。

由於 JSON 規范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會遇上什麼麻煩。

順便提一句，angular框架與 axios 默認的post採用是這種編碼，php端不能直接使用$POST接受，使用

它是一種使用 HTTP 作為傳輸協議，XML 作為編碼方式的遠程調用規范,它的使用也很廣泛，能很好的支持已有的 XML-RPC 服務。不過，XML 結構還是過於臃腫，一般場景用 JSON 會更靈活方便。

我們會發現，在很多post,put,delete等請求之前，會有一次 options 請求。

根本原因就是，W3C規范這樣要求了！在跨域請求中，分為簡單請求（get和部分post，post時content-type屬於application/x-www-form-urlencoded，multipart/form-data，text/plain中的一種）和復雜請求。而復雜請求發出之前，就會出現一次options請求。

什麼是options請求呢？它是一種探測性的請求，通過這個方法，客戶端可以在採取具體資源請求之前，決定對該資源採取何種必要措施，或者了解伺服器的性能。

在ajax中出現options請求，也是一種提前探測的情況，ajax跨域請求時，如果請求的是json，就屬於復雜請求，因此需要提前發出一次options請求，用以檢查請求是否是可靠安全的，如果options獲得的回應是拒絕性質的，比如404\403\500等http狀態，就會停止post、put等請求的發出。

雖然在下面的參考文獻中有人提出可以取消options請求，但是實測後發現是不行的，jquery封裝之後，更不能輕易取消。因此，靠javascript客戶端取消options請求是不可能的，只能通過服務端對options請求做出正確的回應，這樣才能保證options請求之後，post、put等請求可以被發出。但是，我們不能允許所有的options請求，而應該是有條件的，所以最好是通過一個特殊的機制，去驗證客戶端發出的options請求數據是否是符合服務端的條件的，如果不滿足，返回403，則客戶端會取消原有的post計劃。

前台跨域post請求，由於CORS（cross origin resource share）規范的存在，瀏覽器會首先發送一次options嗅探，同時header帶上origin，判斷是否有跨域請求許可權，伺服器響應access control allow origin的值，供瀏覽器與origin匹配，如果匹配則正式發送post請求。

如果有伺服器程序許可權，設置，比如jsp中，設置header access control allow origin等於*，就可以得到跨域訪問的目的。

㈡ axios.post 變成 options請求怎麼解決

讓後台通過option請求
請採納

㈢ 為什麼axios請求介面會發起兩次請求

如果只是普通的 ajax 請求，也不會發起這個請求，只有當 ajax 請求綁定了 upload 的事件並且跨域的時候，就會自動發起這個請求。
這樣就明了了，就是我們有upload事件綁定（一般都是本地調試，所以會有跨域），我仔細看了下axios文檔，發現config配置文件中有兩個參數
// onUploadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
// onDownloadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
分別處理上傳和下載事件，也就是這里綁定了upload事件，所以每次請求都會有個option請求。
解決方案很簡單，直接注釋掉就好了，當然如果開發的工程上線使用跟請求的介面是同一個域名下自然不會兩次請求。

㈣ elupload怎麼綁定數據

elupload綁定數據：用v-model綁定一個變數。

在http-request屬性中調用一個定義的方法，方法中執行圖片上傳到php後端的操作，可以用 axios 調用php後端api執行上傳，注意上傳文件之前要 new FormData()，因為是表單上傳，將文件 append到 formData中。

資料庫綁定控制項：

發送給請求的客戶端瀏覽器，然後將數據呈現在瀏覽器頁面上。資料庫綁定控制項能夠自動綁定到數據源公開的數據，並在頁請求生命周期中適當的獲取數據。常用的資料庫綁定控制項有：GridView控制項和DataList控制項。

當然，這些資料庫綁定的控制項也包含一些第三方控制項。下面拿Spread舉例說明如何將第三方控制項綁定到資料庫。

預先設置SqlDataSource1的各項參數（包括查詢，更新，刪除，插入），通這樣綁定數據後：數據正常顯示，單元格類型與資料庫欄位類型不匹配，commanbar上邊的更新、刪除、插入 等操作無效果。

㈤ axios 如何把表單文件里的圖片傳到後台圖片需要提前轉換格式嗎

常見的做法是：
1. 拿到type=file的內容
2. axios的headers的content-type設置成multipart/form-data
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => console.log(res)).catch(err => console.log(err))

㈥ 為什麼axios請求介面會發起兩次請求

config配置文件中有兩個參數
// onUploadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
// onDownloadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
分別處理上傳和下載事件，也就是這里綁定了upload事件，所以每次請求都會有個option請求。

㈦ HTTP請求常見的Content-Type類型

在現在ajax庫已經完善的前提下，Content-Type有哪幾種類型其實無所謂，按住application/json用就完了。但是，保不齊面試要考，所以還是全面了解一下為好。

最常見的 POST 提交數據的方式，原生Form表單如果不設置 enctype 屬性，默認為application/x-www-form-urlencoded 方式提交數據。

首先，Content-Type被指定為 application/x-www-form-urlencoded；其次，請求體格式是 key1=val1&key2=val2 的形式，其中key 和 val 都進行了 URL 轉碼，就好像URL傳參一樣。大部分服務端語言都對這種方式有很好的支持。

不支持文件上傳。

jQuery的Content-Type默認值是」application/x-www-form-urlencoded;charset=utf-8」。

另一個常見的 POST 數據提交的方式，如果 Form 表單的 enctype 設置為multipart/form-data，它的請求體的格式是：將表單的數據處理為一條消息，以標簽為單元，用分隔符（這就是boundary的作用）分開，比如：

解釋一下：

支持文件上傳。

ajax請求的話，在 window.FormData 誕生之前無法實現， window.FormData 誕生後可以實現。

出現的較晚，但越來越流行。請求體是序列化後的 JSON 字元串，最大好處就是 JSON 格式比鍵值對支持復雜得多的結構化數據。

Form表單只要設置enctype為application/json就可以支持，但是也要看瀏覽器版本，低版本 IE 不支持這個enctype值。

ajax方面，axios默認採用application/json。

不支持上傳文件。

在Chrome瀏覽器的Postman工具中，還可以看到」binary「這一類型，指的就是一些二進制文件類型。如application/pdf，指定了特定二進制文件的MIME類型。就像對於text文件類型若沒有特定的子類型（subtype），就使用 text/plain。類似的，二進制文件沒有特定或已知的 subtype，即使用 application/octet-stream，這是應用程序文件的默認值，一般很少直接使用 。

對於application/octet-stream，只能提交二進制數據，而且只能提交一個二進制數據，如果提交文件的話，只能提交一個文件，後台接收參數只能有一個，而且只能是流（或者位元組數組）。

很多web伺服器使用默認的 application/octet-stream 來發送未知類型。出於一些安全原因，對於這些資源瀏覽器不允許設置一些自定義默認操作，導致用戶必須存儲到本地以使用。一般來說，設置正確的MIME類型很重要。

即便是只上傳一個文件，實踐中也通常不用application/octet-stream，畢竟現在的瀏覽器沒有不支持form-data的。

㈧ vue中使用axios上傳文件

我看了下我之前寫的幾個代碼，全都不是直接掛在在vue 原型上的，

而是寫個apis.js 裡面引入 引入

然後再把 這個js 掛在vue原型上

main.js

能不能直接掛載再vue 原型 我也不清楚，需要求證

㈨ ajax為什麼要用formdata封裝在提交數據

一般文件上傳是使用form表單提交，通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後台。這用jQuery的方法來說，就是serialize。
通過$('#postForm').serialize()可以對form表單進行序列化，從而將form表單中的所有參數傳遞到服務端。

但是上述方式，只能傳遞一般的參數，上傳文件的文件流是無法被序列化並傳遞的。
不過如今主流瀏覽器都開始支持一個叫做FormData的對象，有了這個FormData，我們就可以輕松地使用Ajax方式進行文件上傳了。
但是提交以後會有刷新。而且文件本身是一個二進制流。這時可以創建一個formData。然後append該文件，然後封裝成一個對象，直接進行ajax提交就可以了
具體如下：
var formdata = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});//向後台上傳附件，傳四個參數 postFile(parentNodeId, nodeId){ let param=new FormData();//創建 form對象 param.append('businessNo',projectNo); param.append('packageNo', "commonProject"); param.append("parentNodeId",parentNodeId); param.append("nodeId",nodeId); var uploadObject=event.target.files; console.log(uploadObject); var i; for( i in uploadObject){ param.append("file", uploadObject[i]); } //console.log(param.get('file'));//查看file,需要使用get方法,FormData私有類對象,訪問不到,可以通過get判斷值是否傳進去 let config={ headers:{ 'Content-Type': 'multipart/form-data' } //添加表頭，因為模擬form提交時，上傳文件，需要 }; //this.fileList.push(e.target.files[0]); axios.post("/auditMgr/fileUp",param,config ).then((res)=>{ console.log(res.data); this.getuploadfile(); }) },