vue中项目如何提交form格式数据的表单

Halima ·

更新时间:2024-11-10

· 459 次阅读

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 表单数据 form

1024 个赞