提交的FormData在axios里面如何获取到它的数据？

Question

在做一个添加用户的功能，点击按钮时执行如下代码

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){
    //输出竟然为空{}对象
    console.log(JSON.stringify(datas))

}

这儿为什么获取不到this.$store.dispatch('AddUser',form)过来的form对象呢？但是浏览器f12可以监听到提交的数据，如下图：

Answer 1

FormData里面是通过原型来封装的方法，也就是私有属性，直接获取是获取不到的，给你一种可以获取的方法：

var fd = new FormData();
fd.append("portrait", imgInfo); //imgInfo 为 file
//console.log(fd); //这样是打印不出数据的，但是数据又确实在里面
console.log(fd.get("portrait")); //这样就可以打印出那个文件了，在fetch.js里面打印也是需要如此

希望能帮助到你

Answer 2

Answer 3

补充一下问题：

在 AddUser 方法里面是可以通过datas.get('nickname')获取到数据的，但是

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;//设置config.data，传递到GetFetchPromiseByConfig，在该方法里面获取不到数据
    return GetFetchPromiseByConfig(config).then(res => {
        let _nickname = datas.get('nickname');//可以获取到nickname
        return new Promise((resolve,reject) => { 
            resolve('');
        })
    });
},

设置 config.data = datas;并且将 config传递到GetFetchPromiseByConfig方法，在改方法里面获取不到，通过config.data.get('nickname')获取不到数据，如下：

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请求拦截器，如下，在拦截器里面获取不到数据

service.interceptors.request.use(config => { 
  console.log('获取数据')
  console.log(config.data.get('nickname'))//这句报错，get not a function
}