vue中项目如何提交form格式数据的表单

这篇文章主要介绍了vue中项目如何提交form格式数据的表单，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue提交form格式数据的表单

先将数据处理

let formData = new FormData(); for(let key in this.telForm){      formData.append(key,this.telForm[key]); }

数据上传

//采用封装的post方法上传 this.postRequest('web/login/mobile',formData).then(res=>{    console.log(res) }) //或者采用普通的axios方法上传 axios({   method:"post",   url:"web/login/mobile",   headers: {     "Content-Type": "multipart/form-data"   },   withCredentials:true,   data: formData }).then((res)=>{   console.log(res);  });

封装文件

//封装的方法 import axios from 'axios'; import {Message} from "element-ui"; import router from "../router"; /**  * 错误消息统一显示方法  * 封装请求方法，只负责提示错误信息，如果失败返回空值null，如果成功，返回后端接口传输的数据  */ axios.interceptors.response.use(success=>{     //如果返回服务端自定义异常     if (success.status && success.status === 200 && success.data.status === 500) {         Message.error({message: success.data.message})         return;     }     //如果存在自定义属性message，则打印出来     if (success.data.message) {         Message.success({message: success.data.message})     }     //请求200 ， 服务端自定义属性status200 , 没有相应信息 , 则直接返回数据     return success.data; } , error => {     if (error.response.status===504||error.response.status===404){         Message.error({message: "服务器被吃了( ╯□╰ )"})     }else if (error.response.status === 403) {         Message.error({message: "权限不足哦"})     }else if (error.response.status === 401) {         Message.error({message: "先登录哦亲"});         router.replace("/");         //未知的请求错误     }else {         if (error.response.data.message) {             Message.error({message: error.response.data.message})         } else {             Message.error({message: '未知错误!'})         }     }     //返回空值代表有错误     return ; }); //定义url前缀 let base = ''; //post方法封装 export const  postRequest = (url,params)=>{     return axios({         method: 'post',         url : `${base}${url}`,         data: params     }); };