axios post提交formdata的實例

下面我就為大家分享一篇axios post提交formdata的實例，具有很好的參考價值，希望對大家有幫助。

vue框架推薦使用axios來傳送ajax請求，之前我還寫過一篇部落格來講解如何在vue元件中使用axios。但之前做著玩用的都是get請求，現在我自己搭部落格時使用了post方法，結果發現後台（node.js）完全拿不到前台傳來的參數。後來進過一番探索，終於發現問題所在。

post提交資料的四種編碼方式

#1.application/x-www-form-urlencoded

這應該是最常見的post編碼方式，一般的表單提交預設以此方式提交。大部分伺服器語言對這種方式都有很好的支援。在PHP中，可以用$_POST[“key”]的方式取得到key的值，在node中我們可以使用querystring中間件對參數進行分離

app.post("/server",function(req,res){
 req.on("data",function(data){
 let key=querystring.parse(decodeURIComponent(data)).key;
 console.log("querystring:"+key)
 });
});

#2.multipart/form-data

這也是比較常見的post資料格式，我們用表單上傳檔案時，必須讓form表單的enctype屬性或ajax的contentType參數等於multipart/form-data。使用這種編碼格式時發送到後台的資料長得像這樣子

不同欄位以--boundary開始，接著是內容描述訊息，最後是欄位具體內容。如果傳輸的是文件，還要包含文件名稱和文件類型資訊

3.application/json

axios預設提交就是使用這種格式。如果使用這種編碼方式，那麼傳遞到後台的將是序列化後的json字串。我們可以將application/json與application/x-www-form-urlencoded發送的資料進行比較

首先是application/json：

接著是application/x-www-form-urlencoded：

這裡可以明顯看出application/x-www-form-urlencoded上傳到後台的資料是以key-value形式進行組織的，而application/json則直接是個json字串。如果在處理application/json時後台還是採用對付application/x-www-form-urlencoded的方式將會產生問題。

例如後台node.js依然採用之前對付application/x-www-form-urlencoded的方法，那麼querystring.parse(decodeURIComponent(data))之後得到的資料就是這樣子的

#這時候再querystring.parse(decodeURIComponent(data)).key只能取得到undefined

4.text/xml

剩下的一種編碼格式是text/xml，這種格式我沒有怎麼使用過

#解決方法

##既然我們知道axios post方法預設使用application/json格式編碼數據，那麼解決方案就有兩種，一是後台改變接收參數的方法，另一種則是將axios post方法的編碼格式修改為application/x-www-form-urlencoded，這樣就不需要後台做什麼修改了。

先來看第一個解決方法

vue元件中，axios傳送post請求的程式碼如下

#

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
 name:this.name,
 password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

此時控制台Network Headers裡面的資訊是這樣子的

#後台接收資料需要依賴body-parser中間件，我們事先裝好，接著在後台程式碼中引用body-parser

#這張截圖中，發揮作用的程式碼只是const bodyParser=require("body-parser ");

接下來在路由中使用body-parser

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

這時，目前台發送post請求之後，在後台控制台中就會印出req.body

這時，透過req.body.name或req.body.password就能拿到對應的值。

這種方法比較簡單，也不需要前台做過多修改，推薦使用這種方法。

第二種解決方法，具體運算如下

##

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
 'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
 name:this.name,
 password:this.password
 },
 transformRequest: [function (data) {
 let ret = ''
 for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 }
 return ret
 }],
}).then((res)=>{
 console.log(res.data);
})

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。

后台代码如下

app.post("/api/haveUser",function(req,res){
 let haveUser=require("../api/server/user.js");
 req.on("data",function(data){
  let name=querystring.parse(decodeURIComponent(data)).name;
  let password=querystring.parse(decodeURIComponent(data)).password;
  console.log(name,password)
  haveUser(name,password,res);
 });
});

这种方法明显就要比第一种麻烦一点，但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jQuery+Cookie实现切换皮肤功能

jQuery实现的回车触发按钮事件功能示例

基于jQuery实现Ajax验证用户名是否可用实例

以上是axios post提交formdata的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！