Vue 如何提交表单数据

<body>
    <form>
        <input type="text" value="" v-model="name" placeholder="请输入用户名">
        <input type="text" value="" v-model="age" placeholder="请输入年龄">
        <input type="text" value="" v-model="password" placeholder="请输入密码">
        <input type="file" @change="getFile($event)">
        <button @click="subForm($event)">提交</button>
    </form>
</body>
    <script>
        window.onload = function () {
            Vue.prototype.$axios = axios;
            new Vue({
                el: form,
                data: {
                    name: ,
                    age: ,
                    password:,
                    file: 
                },
                methods: {
                    getFile(event) {
                        this.file = event.target.files[0];
                        console.log(this.file);
                    },
                    subForm(event) {
                        event.preventDefault();
                        let formData = new FormData();
                        formData.append(name, this.name);
                        formData.append(age, this.age);
                        formData.append(password, this.password);
                        formData.append(file, this.file);

                        let config = {
                            headers: {
                                Content-Type: multipart/form-data
                            }
                        }

                        this.$axios.post(/upload, formData,config).then(function 
                         (res) {
                            if (res.status === 2000) {
                                /*这里做处理.....*/
                            }
                        })
                    }
                }
            })
        }
    </script>
经验分享 程序员 微信小程序 职场和发展