vue+axios通过formdata提交参数和上传文件

demo.vue 文件

<template>
    <div class="demo">
        <input v-model="importForm.month" type="text" name="month"/>    
        <input ref="importFile" type="file" name="importFile" @change="handleFileChange" />
        <button @click="handleConfimImport">确认导入</button>
    </div>
</template>

<script>
    export default {
        name: 'profitLossTree',
        components: {},
        data(){
            return {
                importForm: {
                    month: '',
                    importFile: '',
                },
            }
        },
        computed: {},
        watch: {},
        methods: {

            //导入文件改变
            handleFileChange(){
                console.log(this.$refs.importFile.files[0]);
                this.importForm.importFile = this.$refs.importFile.files[0];
                // console.log(this.importForm, '改变');
            },
            // 确认导入
            handleConfimImport(name){
/*              //提取到 post_formData 方法中
                // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
                //创建一个FormData对象，然后通过append() 方法向对象中添加键值对
                let formData = new window.FormData();
                formData.append("month", this.importForm.month);
                formData.append("importFile", this.importForm.importFile);
                console.log('formData', formData);  //formData中的参数是隐式的直接看不到, 可以通过formData 实例的get方法获取
                console.log('formData--month', formData.get('month'));
                console.log('formData--importFile', formData.get('importFile'));
                this.$post_formData( '/profitLossController/importDataNew', 
                    formData 
                ).then( res => {
                    this.$Message.success('导入成功!');
                }) .catch( error => {
                    this.$Message.error("请求数据出错");
                });
            }
*/

                this.$post_formData('/profitLossController/importDataNew', { 
                    'month': this.importForm.month , 
                    'importFile': this.importForm.importFile
                }).then( res => {
                    this.$Message.success('导入成功!');
                }) .catch( error => {
                    this.$Message.error("请求数据出错");
                });
        },
        mounted(){

        }
    };
</script>

<style scoped>

</style>

View Code