這次帶給大家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中文网其它相关文章！
推荐阅读：
echarts鼠标覆盖高亮显示节点关系数实现步骤
vue1与vue2获取dom元素步骤详解
以上是axios+post方法提交formdata步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
