vue上传表单node接受

<template>
    <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>
</template>
<script>
export default {
    data() {
        return {
            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('/api/image', formData, config).then(function(res) {
                if (res.status === 2000) {
                    /*这里做处理*/
                }
            })
        }
    }
}
</script>

var formidable = require('formidable'); //上传功能的插件
router.post('/image', (req, res, next) => {
  var form = new formidable.IncomingForm();
  form.parse(req, function (err, fields, files) {
    console.log(files)
    console.log(fields)
    console.log(err)
    res.send(files)
  })
})

 

转载于:https://www.cnblogs.com/wuyushuo/p/7473884.html