vue中项目如何提交form格式数据的表单
目录
- 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 }); };
vue form表单最简写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <title>vue</title> </head> <body> <div id="app"> <form @submit.prevent="submitPost"> <input type="text" name="name"> <input type="password" name="pass"> <div> <input type="checkbox" name="ischeckbox"> <input type="radio" name="isradio"> <div> <input type="mail" name="mail"> <div> <input type="file" name="img"> </div> </div> </div> <input type="submit" value="提交"> </form> </div> <script> const app = new Vue({ el: '#app', data: { }, methods: { submitPost(event) { const formData = new FormData(event.target) for (let [a, b] of formData) { console.log('所有表单填写的内容:'+ a, b); } } } }); </script> </body> </html>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)