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，則打印出來(lái)
? ? if (success.data.message) {
? ? ? ? Message.success({message: success.data.message})
? ? }
? ? //請(qǐng)求200 ， 服務(wù)端自定義屬性status200 , 沒(méi)有相應(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表單最簡(jiǎn)寫(xiě)法
<!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('所有表單填寫(xiě)的內(nèi)容：'+ a, b);
}
}
}
});
</script>
</body>
</html>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
組件是Vue.js的最核心的功能,所謂的組件化就是把頁(yè)面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開(kāi)發(fā)與維護(hù),然后在制作網(wǎng)頁(yè)的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
詳解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介紹了vue-cli中的ESlint配置文件eslintrc.js詳解 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。下面我們通過(guò)本文給大家介紹vue axios用法教程詳解，感興趣的朋友一起看看吧2017-07-07
vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
本篇文章主要介紹了vue如何獲取點(diǎn)擊事件源的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
下面小編就為大家分享一篇vue.js 微信支付前端代碼。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決
這篇文章主要介紹了配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue使用el-upload實(shí)現(xiàn)文件上傳的實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01
項(xiàng)目每次打包后都需要改動(dòng)項(xiàng)目版本號(hào)，這個(gè)改動(dòng)每次都需要在package.json中修改version，比較麻煩，到底有沒(méi)有一種打包后版本號(hào)自加的辦法，這篇文章主要介紹了vue打包項(xiàng)目版本號(hào)自加的步驟,需要的朋友可以參考下2022-09-09