方法一：配置transformRequest，缺點：其他請求格式的數據也會被重新格式化（PUT，PATCH）

const service = axios.create({//設置axios為form-data 方法1// headers: {// post: {// "Content-Type": "application/x-www-form-urlencoded"// },// get: {// "Content-Type": "application/x-www-form-urlencoded"// }// },transformRequest: [function (data) {let request = ''for (let item in data) {if (data[item])request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'}return request.slice(0, request.length - 1)}] })

方法二：添加請求攔截器，對癥下藥（推薦），所有主要瀏覽器都支持 encodeURIComponent() 函數

//添加請求攔截器 service.interceptors.request.use(config => {//設置axios為form-data 方法2if (config.method === 'post') {let data = ''for (let item in config.data) {if (config.data[item])data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'}config.data = data.slice(0, data.length - 1)}return config;},error => {console.log("在request攔截器顯示錯誤：", error.response)return Promise.reject(error);} );

方法三：添加請求攔截器，使用axios 插件qs轉換，可能存在兼容性問題

import qs from 'qs'; //添加請求攔截器 service.interceptors.request.use(config => {//設置axios為form-data 方法2if (config.method === 'post') {config.data = qs.stringify(config.data); // npm install axios qs --save}return config;},error => {console.log("在request攔截器顯示錯誤：", error.response)return Promise.reject(error);} );

完整代碼：

import axios from 'axios' import store from '@/store' import router from '@/router' import Vue from "vue"; // import qs from 'qs'; let vue = new Vue()// create an axios instance const service = axios.create({// index.js設置了代理(解決跨域) api = XXXbaseURL: "/api", // url = base url + request urltimeout: 5000, // request timeout// headers: {// Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",// Cookie: "JSESSIONID=8F611FDFEBA4FA2A1891D5929F5E8682",// "Upgrade-Insecure-Requests": 1,// "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"// }//設置axios為form-data 方法1// headers: {// post: {// "Content-Type": "application/x-www-form-urlencoded"// },// get: {// "Content-Type": "application/x-www-form-urlencoded"// }// },// transformRequest: [function (data) {// let request = ''// for (let item in data) {// if (data[item])// request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'// }// return request.slice(0, request.length - 1)// }] })//添加請求攔截器，若token存在則在請求頭中加token，不存在也繼續請求 service.interceptors.request.use(config => {// 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token// Authorization是必須的// if (store.getters.getToken) {// config.headers.Authorization = store.getters.getToken;// }vue.$Loading.start()//設置axios為form-data 方法2if (config.method === 'post') {// config.data = qs.stringify(config.data); // npm install axios qs --savelet data = ''for (let item in config.data) {if (config.data[item])data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'}config.data = data.slice(0, data.length - 1)}return config;},error => {console.log("在request攔截器顯示錯誤：", error.response)vue.$Loading.error()return Promise.reject(error);} );//respone攔截器 service.interceptors.response.use(response => {vue.$Loading.finish();// 在status正確的情況下，code不正確則返回對應的錯誤信息（后臺自定義為200是正確，并且將錯誤信息寫在message），正確則返回響應return response.data;},error => {vue.$Loading.error()// 在status不正確的情況下，判別status狀態碼給出對應響應if (error.response) {console.log("在respone攔截器顯示錯誤：", error.response)switch (error.response.status) {case 401://可能是token過期，清除它store.commit("delToken");router.replace({ //跳轉到登錄頁面path: '/login',// 將跳轉的路由path作為參數，登錄成功后跳轉到該路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response);} );export default service// axios({ // url:'/user', // `url`是服務器鏈接，用來請求用 // method:`get`, // `method`是發起請求時的請求方法 // baseURL:'http://some-domain.com/api/', // `baseURL`如果`url`不是絕對地址，那么將會加在其前面。當axios使用相對地址時這個設置非常方便// transformRequest:[function(data){ // `transformRequest`允許請求的數據在傳到服務器之前進行轉化。只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法。數組中的最后一個函數必須返回一個字符串，一個`ArrayBuffer`,或者`Stream` // //依自己的需求對請求數據進行處理 // return data; // }], // transformResponse:[function(data){ // `transformResponse`允許返回的數據傳入then/catch之前進行處理 // //依需要對數據進行處理 // return data; // }], // headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定義的要被發送的頭信息 // params:{ //`params`是請求連接中的請求參數，必須是一個純對象，或者URLSearchParams對象 // ID:12345 // }, // paramsSerializer: function(params){//`paramsSerializer`是一個可選的函數，是用來序列化參數，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/) // return Qs.stringify(params,{arrayFormat:'brackets'}) // }, // data:{//`data`是請求提需要設置的數據，只適用于應用的'PUT','POST','PATCH'，請求方法。當沒有設置`transformRequest`時，必須是以下其中之一的類型（不可重復？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。僅瀏覽器：FormData,File,Blob。僅Node：Stream // firstName:'fred' // }, // //`timeout`定義請求的時間，單位是毫秒。 // //如果請求的時間超過這個設定時間，請求將會停止。 // timeout:1000, // //`withCredentials`表明是否跨域請求， // //應該是用證書 // withCredentials:false //默認值 // //`adapter`適配器，允許自定義處理請求，這會使測試更簡單。 // //返回一個promise，并且提供驗證返回（查看[response docs](#response-api)） // adapter:function(config){ // /*...*/ // }, // //`auth`表明HTTP基礎的認證應該被使用，并且提供證書。 // //這個會設置一個`authorization` 頭（header），并且覆蓋你在header設置的Authorization頭信息。 // auth:{ // username:'janedoe', // password:'s00pers3cret' // }, // //`responsetype`表明服務器返回的數據類型，這些類型的設置應該是 // //'arraybuffer','blob','document','json','text',stream' // responsetype:'json', // //`xsrfHeaderName` 是http頭（header）的名字，并且該頭攜帶xsrf的值 // xrsfHeadername:'X-XSRF-TOKEN'，//默認值 // //`onUploadProgress`允許處理上傳過程的事件 // onUploadProgress: function(progressEvent){ // //本地過程事件發生時想做的事 // }, // //`onDownloadProgress`允許處理下載過程的事件 // onDownloadProgress: function(progressEvent){ // //下載過程中想做的事 // }, // //`maxContentLength` 定義http返回內容的最大容量 // maxContentLength: 2000, // //`validateStatus` 定義promise的resolve和reject。 // //http返回狀態碼，如果`validateStatus`返回true（或者設置成null/undefined），promise將會接受；其他的promise將會拒絕。 // validateStatus: function(status){ // return status >= 200 &;&; stauts < 300;//默認 // }, // //`httpAgent` 和 `httpsAgent`當產生一個http或者https請求時分別定義一個自定義的代理，在nodejs中。 // //這個允許設置一些選選個，像是`keepAlive`--這個在默認中是沒有開啟的。 // httpAgent: new http.Agent({keepAlive:treu}), // httpsAgent: new https.Agent({keepAlive:true}), // //`proxy`定義服務器的主機名字和端口號。 // //`auth`表明HTTP基本認證應該跟`proxy`相連接，并且提供證書。 // //這個將設置一個'Proxy-Authorization'頭(header)，覆蓋原先自定義的。 // proxy:{ // host:127.0.0.1, // port:9000, // auth:{ // username:'cdd', // password:'123456' // } // }, // //`cancelTaken` 定義一個取消，能夠用來取消請求 // //（查看 下面的Cancellation 的詳細部分） // cancelToke: new CancelToken(function(cancel){ // }) // });

總結

以上是生活随笔為你收集整理的axios把post的RequestPayload格式转为formdata的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。