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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue.js循环radio的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue引入cesium问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue项目基于WebRTC实现一对一音视频通话效果,实现代码分为前端和后端两部分代码,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了vue移动端的左右滑动事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在Vue项目中实现文件下载有多种方式,包括使用window.open、<a>标签、axios、FetchAPI、自定义$download方法以及创建a标签等,每种方法都有其适用场景,开发者可以根据项目需求选择最合适的方式2025-01-01
这篇文章主要介绍了ant design vue中表格指定格式渲染方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue3响应式高阶用法之shallowReadonly()使用
在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
VUE使用localstorage和sessionstorage实现登录示例详解
这篇文章主要为大家介绍了VUE使用localstorage和sessionstorage实现登录示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论