How can I upload image to API Vue.js

I create API project with add and edit product, I am trying to send a data from form vue cli to my api to save it in my api database and get the image to display it in my vue cli project.

I’m new to Vue.js and this is my input code

                <input
                  type="file"
                  name="image"
                  ref="file"
                  @change="getFile"
                  class="form-control"
                  placeholder="اختر صورة المنتج"
                />

export default {
  name: "addPro",
  data: function () {
    return {
      name: null,
      price: null,
      details: null,
      subject: null,
      file: null,
    };
  },
  methods: {
    getFile: function (event) {
      this.file = event.target.files[0].name;
      console.log(this.file)
    },
    addPro: function () {
      /* const formData = new FormData();
      formData.append("file", this.file); */
      axios
        .post("http://localhost:8000/api/add-product", {
          name: this.name,
          price: this.price,
          details: this.details,
          subject: this.subject,
          image: this.file,
        })
        .then((data) => console.log(data))
        .catch((err) => console.log(err));
    },
  },
  components: { Header, Footer },
};
</script>

This is how the data is stored, but the image is stored with its name and I don’t know if this is true, I want to store them so I can display them on another page