您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空怎么解決的相關知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue中formdata傳值給后臺時參數(shù)為空怎么解決文章都會有所收獲,下面我們一起來看看吧。
在vue里面使用formData的時候參數(shù)值為空,是因為axios是進行了二次封裝,所以傳遞表達的時候會傳遞一個空表單過去
axios在進行二次封裝的時候回影響到原來的表單提交或者文件上傳, 所以可以用原生的發(fā)請求
// list 是一個對象數(shù)組 export const orinCatelogue = (list) => { let fd = new FormData() for(var i=0;i<list.length;i++) { console.log(list[i]) console.log(Object.keys(list[i])) console.log(Object.values(list[i])) fd.append(Object.keys(list[i]),Object.values(list[i])) console.log("---------") } return axios({ method: "post", url: `sgcc/qa/catalogue`, data: fd, headers: { "Content-Type": "multipart/form-data" } }) }
比如輸入是:
控制臺輸出:
實際上傳遞的參數(shù):
關于在vue中使用axios,傳遞的參數(shù)是formData的情況(上傳文件,圖片,文檔等)
1.將from表單元素的name和value結合,實現(xiàn)表單數(shù)據(jù)的序列化
2.異步上傳文件
1.創(chuàng)建一個空對象
var formData = new FormData(); //大部分情況下,使用formData追加數(shù)據(jù),是通過append() Api來進行追加 formData.append(key,value) //取出追加的值 formData.get(key) //修改值 formData.set(key,newVale)
2.通過表單對formData進行初始化
<form id="myForm"> <p>name:<input type="text" name="name" value="xiaolong"></p> <p>age:<input type="text" name="age" value="23"></p> <p><input type="button" id="btn" value="添加"></p> </form>
通過表單元素作為參數(shù),對formData進行初始化
var btn=document.querySelector("#btn"); btn.onclick=function(){ //獲取表單元素 var form=document.querySelector("#myForm"); //初始化表單 var formdata=new FormData(form); //此時可以進行一個操作,獲取或者設置表單的值或者直接提交整個表單 console.log(formdata.get("name"));//xiaolong }
大部分可以從mdn上面查找到
舉個例子:
獲取表單數(shù)據(jù)或者獲取整個表單對應key的數(shù)據(jù)
formData.get('age')//獲取一個key為age的值 formData.getAll('age')//獲取全部key為age的數(shù)據(jù)
在vue里面使用formData的時候,因為axios是進行了二次封裝,所以傳遞表達的時候會傳遞一個空表單過去,這是因為axios在進行二次封裝的時候回影響到原來的表單提交或者文件上傳
因此在使用二次封裝axios的時候需要進行一個參數(shù)的設置
this.$axios({ method: "post", url: `你的請求地址`, data: formD,//這個是我的fromdata headers: { transformRequest: [data => data]//此處是我進行設置的轉(zhuǎn)換數(shù)據(jù)類型 } })
關于“vue中formdata傳值給后臺時參數(shù)為空怎么解決”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue中formdata傳值給后臺時參數(shù)為空怎么解決”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。