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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue表单数据交互提交演示教程
欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://
-
Vue axios 中提交表单数据(含上传文件)
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport
-
vue 解决form表单提交但不跳转页面的问题
vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial
-
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)
-
解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-urlencoded 这应该是最常见的后编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以用$ _ POST ["钥匙"]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离 app.post("/server&q
-
Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. 第二步: 我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中 父组件中 <div class="chart" shadow="always">
-
Vue2 Element Schema Form 配置式生成表单的实现
目录 前置知识点 Component $attrs $listeners 表单的结构是什么样的 配置数组数据结构 结语 前置知识点 为了实现一个Schema Form配置式表单的生成,需要了解一部分前置知识点. Component vue 提供了一个内置组件 Component,用来动态渲染组件,举个例子,本篇文章以Element UI 为例,假设我们全局注册了Element UI的组件,那么下面一段代码 <Component is="el-input"></Comp
-
jQuery validate+artdialog+jquery form实现弹出表单思路详解
功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写
-
解决vue中post方式提交数据后台无法接收的问题
最近用vue做项目,遇到ajax提交值的问题. 用post方式提交,后台无法接收到值.百度了半天,各种解决方式都有,下载中间件之类的,都试了. 最后咨询大牛才知道是数据没有序列化的问题. 下面是源码: 因为我没有使用箭头函数,所以需要在外面重新定义this,这样不太好,因为有时忘了的话就很尴尬了. 不过不知道为什么,我之前用 JSON.stringify( ) 完全没有效果. 改成 : var qs = require('querystring') qs.stringify(data) 就ok了
-
Vue-cli中post请求发送Json格式数据方式
目录 post请求发送Json格式数据 举个例子 解决post请求无法携带数据问题 post请求发送Json格式数据 这里就不详细说明了 举个例子 var param = new URLSearchParams(); param.append("productId",this.$route.params.id) this.axios({ url:"http://39.106.44.63:10086/loadAllProd
-
JavaScript动态添加数据到表单并提交的几种方式
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.attr("value", myUeditor.window.getCont
-
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
复制代码 代码如下: <form onsubmit="aa(this);"> <input type="text" name="" value="test" /><input type="submit" value="提交" /> </form> <iframe src="" name="fA"
-
AngularJS中实现用户访问的身份认证和表单验证功能
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们