上传图片文件 vue-resource发送multipart/form-data数据

参考大神的
https://blog.csdn.net/u013810234/article/details/78497860

<template>
  <div class="regis">
    <van-nav-bar title="上传图片" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- regi_con -->
    <div class="regis-con">
      <form @submit.prevent="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="picture" v-on:change="onChange($event)" />
        <button type="submit">上传图片</button>
      </form>

      <div>
        上传信息(vue&vue-resource)：
        <p v-text="result1"></p>
      </div>
    </div>
    <!--按钮-->
  </div>
</template>

<script>
export default {
  data: {
    picture: {},
    result1: ""
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },


    onChange: function(event) {
      this.picture = event.target.files[0]; // get input file object
      console.log(this.picture);
    },

    upload: function() {
      var that = this;

      var formData = new FormData();
      formData.append("flies", this.picture);
      // specify Content-Type, with formData as well
      this.$http
        .post("/api/upload/files", formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(
          function(res) {
            res.json().then(function(result) {
              that.result1 = result.info;
              console.log(that.result);
            });
          },
          function(res) {
            console.log(res.body);
          }
        );
    },
  }
};
</script>
<style lang='scss' scoped>
.regis {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #f5f5f5;
}
.regis-con {
  text-align: center;
}
</style>

完善中。。。