vue的form表单提交(vue表单数据和图片一起提交)

利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,再利用双向绑定得到值。下面写了传json格式跟formData格式的两种情况,根据实际参考<template><divclass=”from_box”><formaction=””><inputty…

大家好,又见面了,我是你们的朋友全栈君。

利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,

再利用双向绑定得到值。下面写了传json格式跟formData格式的两种情况,根据实际参考

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="请输入昵称" v-model="formMess.account">
      <input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
      <input type="text" placeholder="请输入手机号" v-model="formMess.phone">
    </form>
    <span class="but" @click="onSubmit()">提交</span>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "from",
  data() {
    return {
    	formMess:{
	    "account":"",
	    "act_pwd":"",
	    "phone":""
	}
    };
  },
  methods: {
    onSubmit() {
      /* json格式提交: */
      // let formData = JSON.stringify(this.formMess);

      /* formData格式提交: */
      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }

        axios({
	    method:"post",
	    url:"xxxxxxx",
	    headers: {
		  "Content-Type": "multipart/form-data"
	    },
	    withCredentials:true,
	    data:formData
	}).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{
  form{
    width:90%;
    margin: auto;
    border:.01rem solid gray;
    display: flex;
    flex-wrap: wrap;
    input{
      width:80%;
      height:.5rem;
      margin-bottom: .2rem;
      border:.01rem solid black;
      height:.5rem;
    }
  }
  .but{
    font-size: .14rem;
    margin-left:5%;
  }
}
</style>

 

vue批量验证form表单数据:

https://blog.csdn.net/caimingxian401/article/details/97135133

 

喜欢可点赞/ 收藏/ 评论/ 打赏,有人回应才有动力继续更新哒!\‘▽′/

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125639.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 课程设计题七:交通灯控制器[通俗易懂]

    课程设计题七:交通灯控制器[通俗易懂]要求:1、红灯和绿灯相互转换时经过黄灯,黄灯闪烁三次(6秒);2、主干道方向通行30秒,辅干道方向通行20秒,单独左转信号15秒;先直行信号,后左转信号。3、设手动、自动、特殊情况三种方式。4、特殊情况时所有路口红灯都亮,给120、110等通行。5、自动时显示各种状态倒计时。获取该程序+protues的方式:1、CSDN下载:https://download.c…

  • nginx负载均衡算法有哪些_dubbo负载均衡算法

    nginx负载均衡算法有哪些_dubbo负载均衡算法nginx负载均衡的几种算法

    2022年10月12日
  • 云计算,大数据,物联网三者的区别与联系方法_物联网与云存储的关系

    云计算,大数据,物联网三者的区别与联系方法_物联网与云存储的关系

  • 前端总结大全

    前端总结大全记住88条精简前端面试题,让面试成为享受前言HTML&CSSJavaScriptVUE网络性能相关前言背的最少、面的最好。你的面试我帮你,夜色正黑,我们出发,感谢各位一直默默关注本侠的小伙伴,你们的关注,是我永恒动力,在此奉上一份大礼。次面试技能题不是最全,却是最精。后期持续优化改进。HTML&CSS浏览器内核;盒模型、flex布局、两/三栏布局、水平/垂直居中;BFC、清除浮动;css3动画、H5新特性。JavaScript继承、原型链、this指向、设计模式

  • huffman编码——原理与实现

    huffman编码——原理与实现

  • 万能头文件可能产生的副作用_头文件使用std

    万能头文件可能产生的副作用_头文件使用std可能有些大型比赛会禁止使用这个头文件,我个人建议,大家尽量还是熟悉原来的文件比较好哈,要是比赛时实在忘了可以应急使用最近在打一些比赛,翻阅别人的代码时总是会发现一个陌生而奇怪的头文件#include<bits/stdc++.h>奇怪之处就在于基本上所有的代码只要用了这个头文件就不再写其他头文件了。百度过后仿佛打开了新世界的大门,头文件居然还可以这样用!!!#include&lt…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号