axios页面无刷新提交from表单

Posted 2021-02-15 三只小猪猪

页面部分大概意思一下

1 <form method="post"  enctype="multipart/form-data">
2         ...  
3 </form>

axios部分代码以vue示例：

//提交表单
    onSubmit(e) {
      e = e || event;
      e.preventDefault();
      let self = this;
      let formData = new FormData();
      formData.append("idCard", self.cardImageFile);//文件
      formData.append("idType", "1");
      formData.append("idNumber", self.cardNo);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      self.$http.post("/upload", formData, config).then(
        function(response) {
          if (response.data.code == 200 && response.data.success) {
            /*这里做处理*/
          }
        },
        response => {}
      );
    },

文件在onchange事件里面取file

无刷新提交表单到此就结束了