Vue axios 中提交表单数据(含上传文件)
更新时间：2017年07月06日 15:29:38 作者：守候你的季节
本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.
当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="text" name="name" value="" placeholder="请输入用户名">
<input type="text" name="age" value="" placeholder="请输入年龄">
<input type="file" name="uploadFile">
<input type="submit" value="提交">
</form>
</body>
</html>
这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.
切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>
<body>
<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>
<script>
window.onload = function () {
Vue.prototype.$http = axios;
new Vue({
el: 'form',
data: {
name: '',
age: '',
file: ''
},
methods: {
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$http.post('/upload', formData, config).then(function (res) {
if (res.status === 2000) {
/*这里做处理*/
}
})
}
}
})
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Nuxt3项目中问题汇总之刷新页面useFetch无返回解决
Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架,这篇文章主要给大家介绍了关于Nuxt3项目中问题汇总之刷新页面useFetch无返回解决办法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了vue实现锚点跳转及滚动监听的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
vue中axios防止多次触发终止多次请求的示例代码（防抖）
这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue 中 get / delete 传递数组参数方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了vue通过 API 监听数组的变化,在 Vue 中，你可以通过监听数组的变化来更新界面，Vue 提供了一些特殊的语法以及 API 来实现对数组的监听，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Vue路由钩子之afterEach beforeEach的区别详解
这篇文章主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了vue数据响应式原理之数组，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论