Vue 提交表单

Vue 同时被 2 个专栏收录
10 篇文章 0 订阅
27 篇文章 0 订阅

1、form标签 @submit.prevent="submit($event)"

<form @submit.prevent="submit($event)">

    <input type="text" class="form-control" placeholder="请输入姓名" name="username">

    <input type="submit" value="登陆" class="login" />

</form>
methods:{
    submit: function(event) {

        var formData = new FormData(event.target);
        
        //vue-resource
        this.$http.post('/api', formData).then(res => {
              // success callback
          }, err => {
              // error callback
        });
        
        //axios
        axios.post('/user',obj).then(res => {
            // success callback
        }).catch(err => {
            // error callback
        });
    }
}

2、formData.append()

设置参数格式

  •  application/json 

axios默认提交格式;传递到后台的将是序列化后的json字符串,格式为JSON格式

格式:{"name": "sun"}

  •  multipart/form-data

用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data

格式:Contnet-Disposition: form-data; name=sun

不同字段以--boundary开始,接着是内容描述信息,最后是字段具体内容。

如果传输的是文件,还要包含文件名和文件类型信息

  •  text/XML 

  • application/x-www-form-urlencoded 

​​​​​​​表单默认提交方式;传递到后台的将是key-value的形式

格式:name: sun

 <form>
        <input type="text" value="" v-model="name" placeholder="请输入用户名">
        <input type="text" value="" v-model="age" placeholder="请输入年龄">
        <input type="file" @change="getFile($event)">
        <button @click="submitForm($event)">提交</button>
  </form>
methods:{
    submit: function(event) {

        event.preventDefault();

        let formData = new FormData();

        //下面是表单绑定的data 数据
        formData.append('name', this.name);
        formData.append('age', this.age);
        formData.append('file', this.file);
        
        //vue-resource
        this.$http.post('/api', formData).then(res => {
              // success callback
          }, err => {
              // error callback
        });
        
        //axios

        //根据后台接收参数格式进行修改
        let config = {
             headers: {
               'Content-Type': 'multipart/form-data'
             }
         }
        
        axios.post('/api',formData, config).then(res => {
            // success callback
        }).catch(err => {
            // error callback
        });
    }
}
  • 6
    点赞
  • 3
    评论
  • 22
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页

打赏作者

Sun~Neo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值