axios異步提交表單數(shù)據(jù)的幾種方法

踩坑Axios提交form表單幾種格式

成都創(chuàng)新互聯(lián)專(zhuān)注于零陵企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城開(kāi)發(fā)。零陵網(wǎng)站建設(shè)公司,為零陵等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

前后端分離的開(kāi)發(fā)前后端, 前端使用的vue,后端的安全模塊使用的SpringSecurity,使用postman測(cè)試后端的權(quán)限接口時(shí)發(fā)現(xiàn)都正常,但是使用vue+axios發(fā)送異步的請(qǐng)求后端一直獲取不出axios提交的form表單的數(shù)據(jù),爬坑兩個(gè)半鐘頭找到了答案

axios用post異步形式提交的數(shù)據(jù)和我們直接使用from表單提交的數(shù)據(jù)的格式(Form Data格式)是不一樣的,在下面列舉

默認(rèn)格式Request Payload

直接使用axios發(fā)送異步請(qǐng)求,沒(méi)任何處理的代碼如下:

const service = axios.create({})

doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
 })

這種方式提交的表單格式是默認(rèn)是RequestPayload, 它的長(zhǎng)下面這個(gè)樣子

可以看到,它的Contet-type是 "Content-Type": "application/json;"
但是后臺(tái)的SpringSecurity對(duì)這種結(jié)果可不買(mǎi)單,在Request中解析不出任何數(shù)據(jù)來(lái)

處理成Form Data格式

使用插件qs, 安裝命令如下:

npm install --save qs

請(qǐng)求編碼:

const service = axios.create({})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }
 
 或者
 
 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo ,
  transformRequest: [function (data) {
  data = qs.stringify(data);
  return data;
  }],
 })
 }

經(jīng)過(guò)這樣處理的表單數(shù)據(jù)長(zhǎng)成下面的這樣, 這也是我們最常用的Form Data格式,這種格式的數(shù)據(jù)可以從后臺(tái)的HttpRequest中把提交的屬性解析出來(lái)

其他類(lèi)型的Content-Type對(duì)應(yīng)的表單數(shù)據(jù)格式

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
  })
 }

它長(zhǎng)這樣

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
  })
 }
---

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data:pojo
  })
 }

const service = axios.create({
 headers: {
  "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
 }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

標(biāo)題名稱(chēng)：axios異步提交表單數(shù)據(jù)的幾種方法
文章分享：http://muchs.cn/article2/pideoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、微信公眾號(hào)、做網(wǎng)站、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)