vue中项目如何提交form格式数据的表单
更新时间：2022年06月02日 09:54:29 作者：雾横
这篇文章主要介绍了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.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下2022-12-12
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
axios是vue-resource后出现的Vue请求数据的插件。下面我们通过本文给大家介绍vue axios用法教程详解，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了vue权限管理系统的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
本篇文章主要介绍了vue如何获取点击事件源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue echarts实现柱状图动态展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
配置vite.confgi.ts无法使用require问题以及解决
这篇文章主要介绍了配置vite.confgi.ts无法使用require问题以及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue使用el-upload实现文件上传,文中示例代码介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴们可以参考一下2024-01-01
项目每次打包后都需要改动项目版本号，这个改动每次都需要在package.json中修改version，比较麻烦，到底有没有一种打包后版本号自加的办法，这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下2022-09-09
最新评论