axios vue 表单验证_Vue axios 中提交表单数据(含上传文件)

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.

当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢?

这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.

切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交

提交

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) {

/*这里做处理*/

}

})

}

}

})

}