vuejs でFormData つかってファイルアップロード

ついでなので、ファイルをpostするところまで追加してみる。

<div id="app">
  <div>
    <h2>Select an image</h2>
    <input type="file" @change="onFileChange">
  </div>
  <div v-if="image">
      <h2>{{imgName}}</h2>
    <img :src="image" />
    <button @click="removeImage">Remove image</button>
    <button @click="submitImage">Submit image</button>
  </div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        image: '',
        imgName: '',
        uploadFile: ''
    },
    methods: {
        onFileChange: function(e){
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            if (!files[0].type.match('image.*')) {
                return;
            }
            this.createImage(files[0]);
            this.uploadFile = files[0];
        },
        createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;
            reader.onload = function(e) {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
            vm.imgName = file.name;
        },
        removeImage: function(e) {
            this.image = '';
            this.imgName = '';
        },
        submitImage: function(e) {
            var formData = new FormData();
            formData.append("number", "123456");
            formData.append('yourimg', this.uploadFile);
            var config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            };
            axios
                .post('post.php', formData, config)
                .then(function(response) {
                    console.log(response);
                    // response 処理
                })
                .catch(function(error) {
                    // error 処理
                })
        }
    },
});

うーん、なんかすっきりしないが。 まあ、でも、結局はファイルはサーバー側でなんとかするしかないわけだし、多かれ少なかれこんな感じになるのでは。