vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理

更新時(shí)間：2023年05月24日 09:07:50 作者：肥仔仔仔

這篇文章主要介紹了vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況

關(guān)于在vue中使用axios，傳遞的參數(shù)是formData的情況（上傳文件，圖片，文檔等）

formData用途

1.將from表單元素的name和value結(jié)合，實(shí)現(xiàn)表單數(shù)據(jù)的序列化

2.異步上傳文件

使用formData

1.創(chuàng)建一個(gè)空對(duì)象

var formData = new FormData();
//大部分情況下，使用formData追加數(shù)據(jù)，是通過(guò)append() Api來(lái)進(jìn)行追加
formData.append(key,value)
//取出追加的值
formData.get(key)
//修改值
formData.set(key,newVale)

2.通過(guò)表單對(duì)formData進(jìn)行初始化

<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>

通過(guò)表單元素作為參數(shù)，對(duì)formData進(jìn)行初始化

var btn=document.querySelector("#btn");
btn.onclick=function(){
? ? //獲取表單元素
? ? var form=document.querySelector("#myForm");
? ? //初始化表單
? ? var formdata=new FormData(form);
?? ?//此時(shí)可以進(jìn)行一個(gè)操作，獲取或者設(shè)置表單的值或者直接提交整個(gè)表單
? ? console.log(formdata.get("name"));//xiaolong
}

具體表單的操作API

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

舉個(gè)例子：

獲取表單數(shù)據(jù)或者獲取整個(gè)表單對(duì)應(yīng)key的數(shù)據(jù)

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

在vue里面使用formData的時(shí)候，因?yàn)閍xios是進(jìn)行了二次封裝，所以傳遞表達(dá)的時(shí)候會(huì)傳遞一個(gè)空表單過(guò)去，這是因?yàn)閍xios在進(jìn)行二次封裝的時(shí)候回影響到原來(lái)的表單提交或者文件上傳

因此在使用二次封裝axios的時(shí)候需要進(jìn)行一個(gè)參數(shù)的設(shè)置

this.$axios({
? ? method: "post",
? ? url: `你的請(qǐng)求地址`,
? ? data: formD,//這個(gè)是我的fromdata
? ? headers: {
? ? transformRequest: [data => data]//此處是我進(jìn)行設(shè)置的轉(zhuǎn)換數(shù)據(jù)類型
? ? }
})

關(guān)于formData傳參問(wèn)題

目前再做一個(gè)支付寶小程序的項(xiàng)目，使用web-view嵌套h5。

做上傳圖片功能時(shí)發(fā)現(xiàn)在ios下的formData傳值有問(wèn)題，安卓下就是好的。因?yàn)閣eb-view嵌套h5不支持上傳圖片功能。ios給參數(shù)做了一些封裝，所以后端接收不到。

然后我就可以利用axios 的transformRequest 配置項(xiàng)。原本調(diào)用接口傳參方式，由傳遞formdata格式，改為直接傳遞普通數(shù)據(jù)，在transformRequest中組裝formdata參數(shù)。

?async takePicFiles(file: any) {
? ? if (file != null) {
? ? ? try {
? ? ? ? const res = await ocrImg({
? ? ? ? ? shopId: getShopId(),
? ? ? ? ? img: file,
? ? ? ? });
? ? ? } catch (e) {}
? ? }
? }

export const ocrImg = (data:any)=>{
? ? return http.request({
? ? ? ? url: httpStr + '/output/invoiceOcr/ocrImg',
? ? ? ? method: 'post',
? ? ? ? data,
? ? ? ? transformRequest: [function (data: any) {
? ? ? ? ? ? const formdata = new FormData()
? ? ? ? ? ? formdata.append("shopId", data.shopId);
? ? ? ? ? ? formdata.append("img",data.img);
? ? ? ? ? ? return formdata
? ? ? ? }],
? ? ? ? type: 'application/x-www-form-urlencoded',
? ? })
}

問(wèn)題解決了