vue+axios上传文件

单独上传文件：

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

methods: {

      update(e){

        let file = e.target.files[0];

        let param = new FormData(); //创建form对象

        param.append('file',file);//通过append向form对象添加数据

        console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去

        let config = {

          headers:{'Content-Type':'multipart/form-data'}

        }; //添加请求头

        this.$http.post('http://127.0.0.1:8081/upload',param,config)

          .then(response=>{

            console.log(response.data);

          })

      }

    }

Form表单上传文件：

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

    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('http://127.0.0.1:8081/upload', formData, config).then(function (response) {

              if (response.status === 200) {

                console.log(response.data);

              }

            })

          }

        }