我们经常使用表单来上传数据, 以及上传文件, 那么怎么在表单提交成功的时候接受服务器的响应, 并作出相应操作.
当然使用一般 jQuery 上传对象的格式也是可以的, 如果使用传统的表单上传呢?
html 代码
- <!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 来模拟表单提交
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <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>
来源: http://www.qdfuns.com/article/23231/16e7cc115f5f13911eeb9bbd37fe6151.html