vue中formdata傳值給后臺時參數為空怎么解決

這篇文章主要介紹了vue中formdata傳值給后臺時參數為空怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue中formdata傳值給后臺時參數為空怎么解決文章都會有所收獲，下面我們一起來看看吧。

formdata傳值給后臺時參數為空

在vue里面使用formData的時候參數值為空，是因為axios是進行了二次封裝，所以傳遞表達的時候會傳遞一個空表單過去

axios在進行二次封裝的時候回影響到原來的表單提交或者文件上傳, 所以可以用原生的發請求

// list 是一個對象數組
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" }
  })
}

比如輸入是：

控制臺輸出：

實際上傳遞的參數：

使用formData時候傳遞參數是個空值的情況

關于在vue中使用axios，傳遞的參數是formData的情況（上傳文件，圖片，文檔等）

formData用途

1.將from表單元素的name和value結合，實現表單數據的序列化

2.異步上傳文件 

使用formData

1.創建一個空對象

var formData = new FormData();
//大部分情況下，使用formData追加數據，是通過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>

通過表單元素作為參數，對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
}

具體表單的操作API

大部分可以從mdn上面查找到

舉個例子：

獲取表單數據或者獲取整個表單對應key的數據

formData.get('age')//獲取一個key為age的值
formData.getAll('age')//獲取全部key為age的數據

在vue里面使用formData的時候，因為axios是進行了二次封裝，所以傳遞表達的時候會傳遞一個空表單過去，這是因為axios在進行二次封裝的時候回影響到原來的表單提交或者文件上傳

因此在使用二次封裝axios的時候需要進行一個參數的設置

this.$axios({
    method: "post",
    url: `你的請求地址`,
    data: formD,//這個是我的fromdata
    headers: {
    transformRequest: [data => data]//此處是我進行設置的轉換數據類型
    }
})

關于“vue中formdata傳值給后臺時參數為空怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue中formdata傳值給后臺時參數為空怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。