Galan小屋

welcome my blog

vue2上传文件以及axios表单提交

By galan99

发表于 2018-05-18

vue中提交表单数据(含上传文件)


<form>
  <input type="text" value="" v-model="name" placeholder="请输入用户名">
  <input type="text" value="" v-model="age" placeholder="请输入年龄">
  <input type="file" @change="getFile($event)" title="上传文件">
  <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 === 0) {
              /*这里做处理*/
            }
          })
        }
      }
    })
  }
</script>