Vue.js 如何提交form？

Question

RT,我用的是vue.js + axios + formdata。但是每次我post的时候，只能将file这个文件post到后端，而参数得到的总是空，不知道应该如何修改？
我的form：

<form action=""  method="post" id="myForm"  enctype="multipart/form-data">
      <lable for="p1">p1:  </lable>
      <input type="text" name="p1" id="hbaseTablePut" v-model="p1">
      <lable for="p2">p2: </lable>
      <input type="text" name="p2" id="p2" v-model="p2" >
    
      <label  class="the-submit">
          <input type="file" id="file" ref="file" v-on:change="handleFileUpload($event)">
      </label>
      <button v-on:click="submitFile($event)">submit</button>
 </form>

script:

data(){
          return{
           p1:'',
           p2:''

          }
submitFile(event){
                event.preventDefault();

                let formData = new FormData();
                formData.append('p1', this.p1);
                formData.append('p2',  this.p2);
                formData.append('file', this.file);
                let config = {
                  headers:{'Content-Type':'multipart/form-data'}
                };


                axios.post("/parser/upload", formData, config
                  ).then(rst =>{
                    //var res = rst.data;
                     //this.fileUpRes = res;
                    console.log('SUCCESS');
                })
                    .catch(function(){
                      this.fileUpRes = 'failed';
                      console.log('FAILURE!!');
                    });
          },

            handleFileUpload(event){
                  event.preventDefault();
                  this.file = this.$refs.file.files[0];

                },

每次用formdata.append的时候，在后端（node.js）后台接收显示的时候，总是只有file能接受到，显示的p1,p2总是{}空的，不知道哪里出了问题？

Answer 1

你从chrome上面把你的提交请求展示出来看看，就能定位到是数据没有提交上去，还是你后端没有正确解析

Answer 2

你把this.p1,this.p2,打印到控制台，看看append之前是多少？