vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單

更新時(shí)間：2022年06月02日 09:54:29 作者：霧橫

這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue提交form格式數(shù)據(jù)的表單

先將數(shù)據(jù)處理

let formData = new FormData();
for(let key in this.telForm){
??? ?formData.append(key,this.telForm[key]);
}

數(shù)據(jù)上傳

//采用封裝的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";
/**
?* 錯(cuò)誤消息統(tǒng)一顯示方法
?* 封裝請(qǐng)求方法，只負(fù)責(zé)提示錯(cuò)誤信息，如果失敗返回空值null，如果成功，返回后端接口傳輸?shù)臄?shù)據(jù)
?*/
axios.interceptors.response.use(success=>{
? ? //如果返回服務(wù)端自定義異常
? ? 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})
? ? }
? ? //請(qǐng)求200 ， 服務(wù)端自定義屬性status200 , 沒有相應(yīng)信息 , 則直接返回?cái)?shù)據(jù)
? ? return success.data;
} , error => {
? ? if (error.response.status===504||error.response.status===404){
? ? ? ? Message.error({message: "服務(wù)器被吃了( ╯□╰ )"})
? ? }else if (error.response.status === 403) {
? ? ? ? Message.error({message: "權(quán)限不足哦"})
? ? }else if (error.response.status === 401) {
? ? ? ? Message.error({message: "先登錄哦親"});
? ? ? ? router.replace("/");
? ? ? ? //未知的請(qǐng)求錯(cuò)誤
? ? }else {
? ? ? ? if (error.response.data.message) {
? ? ? ? ? ? Message.error({message: error.response.data.message})
? ? ? ? } else {
? ? ? ? ? ? Message.error({message: '未知錯(cuò)誤!'})
? ? ? ? }
? ? }
? ? //返回空值代表有錯(cuò)誤
? ? 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('所有表單填寫的內(nèi)容：'+ a, b);
          }
        }
      }
  });
  </script>
</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: