鍍金池/ 問答/HTML/ 提交的FormData在axios里面如何獲取到它的數(shù)據(jù)?

提交的FormData在axios里面如何獲取到它的數(shù)據(jù)?

在做一個添加用戶的功能,點擊按鈕時執(zhí)行如下代碼

CreateUser.vue文件:

    var form = new FormData();
    form.append("nickname", this.userInfo.nickname);
    form.append("portrait", imgInfo);//imgInfo 為 file,
    form.append("sex", false)
    // console.log('準備提交表單')
    this.$store.dispatch('AddUser',form).then(res => {
        this.$router.push({name: 'accountInfo'})
    })

Vuex模塊 fetch.js 文件:

AddUser(context, datas){
    //輸出竟然為空{(diào)}對象
    console.log(JSON.stringify(datas))

}

這兒為什么獲取不到this.$store.dispatch('AddUser',form)過來的form對象呢?但是瀏覽器f12可以監(jiān)聽到提交的數(shù)據(jù),如下圖:
圖片描述

回答
編輯回答
我甘愿

FormData里面是通過原型來封裝的方法,也就是私有屬性,直接獲取是獲取不到的,給你一種可以獲取的方法:

var fd = new FormData();
fd.append("portrait", imgInfo); //imgInfo 為 file
//console.log(fd); //這樣是打印不出數(shù)據(jù)的,但是數(shù)據(jù)又確實在里面
console.log(fd.get("portrait")); //這樣就可以打印出那個文件了,在fetch.js里面打印也是需要如此

希望能幫助到你

2017年4月20日 03:22
編輯回答
離觴

clipboard.png

2017年5月1日 00:58
編輯回答
尐懶貓

補充一下問題:

AddUser 方法里面是可以通過datas.get('nickname')獲取到數(shù)據(jù)的,但是

UpdateUserInfo(context, datas){
    let config = Object.assign({},datas);
    config.url = '/api/adduser';
    config.method = 'post';            
    config.headers = {
        'Content-Type':'multipart/form-data'
    };

    config.data = datas;//設(shè)置config.data,傳遞到GetFetchPromiseByConfig,在該方法里面獲取不到數(shù)據(jù)
    return GetFetchPromiseByConfig(config).then(res => {
        let _nickname = datas.get('nickname');//可以獲取到nickname
        return new Promise((resolve,reject) => { 
            resolve('');
        })
    });
},

設(shè)置 config.data = datas;并且將 config傳遞到GetFetchPromiseByConfig方法,在改方法里面獲取不到,通過config.data.get('nickname')獲取不到數(shù)據(jù),如下:

function GetFetchPromiseByConfig(config){
    if (typeof config === 'object'){
        return new Promise((resolve,reject)=>{
            fetch(config).then(res=>{
                resolve(res.data);
            }).catch(error=>{
                reject(error);
            });
        });
    }
}

fetch方法會進入axios請求攔截器,如下,在攔截器里面獲取不到數(shù)據(jù)


service.interceptors.request.use(config => { 
  console.log('獲取數(shù)據(jù)')
  console.log(config.data.get('nickname'))//這句報錯,get not a function
}
2017年8月13日 10:05