如何将图片和名称发送到数据库？

Question

堆栈vue.js + laravel5.7我需要使用组件中的axios工具将图像和名称加载到数据库中。代码有问题，我听不清是什么问题。

另外，下载并显示了名称，拧紧图片很有用，一切都坏了。 php7.1上的服务器

这是我的模板

<form v-on:submit.prevent="submitCategory()" class="col s12 l12">
            <div class="col s12 l3">
                <div class="input-field ">
                    <input id="name" type="text" v-model="posts.name">
                    <label for="name">Название</label>
                    <div class="file-field input-field">
                        <div class="btn">
                            <span>Загрузить изображение</span>
                            <input type="file" v-on:change="onFileChange">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>

                </div>

                <div>
                    <button class="waves-effect waves-light btn">
                    Сохранить изменения
                    </button>
                </div>
            </div>
            <div class="col s12 l3 center">
                <div v-if="!posts.image">
                    <img src="/images/No_image.png" style="height: 200px"/>

                </div>
                <div v-else>
                    <img :src="posts.image" style="height: 200px"/>
                    <button @click="removeImage" class="btn">Удалить изо</button>
                </div>
            </div> 
        </form>

这是我的剧本

<script>
import axios from 'axios';

export default {
  data: function() {
    return {
      posts: {
          name:'',
          image:'',
      },
      errors: []
    }
  },
  methods:{
  submitCategory() {
    axios.post(`/categories`, this.posts)
    .then(response => {
        console.log(response)
        //this.$router.push({path:'/'})
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    }) 
  },
  onFileChange(e) {
    var files = e.target.files || e.dataTransfer.files;
    console.log(files);
    if (!files.length)
        return;
    this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
    //   var vm = this;

      reader.onload = (e) => {
        this.posts.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    removeImage: function (e) {
      this.posts.image = '';
      e.posts.target.reset();
    }

  }
}
</script>

预计名称和图片将按名称和图像列按类别写入门框，但是什么也没有发生。