首頁 > 文章 > web前端 > axios+post方法提交formdata步驟詳解

axios+post方法提交formdata步驟詳解

php中世界最好的语言原創: 2018-05-10 15:36:3327647瀏覽

這次帶給大家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);
 });
});

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

axios+post方法提交formdata步驟詳解

相關文章