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)

相关推荐

  • vue表单数据交互提交演示教程

    欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://

  • 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 axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • 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构建的单页面应用中,要实现这样的架构我们

随机推荐