vue.js – Problema ao enviar imagem do VUE pro Backend Springboot

estou com um problema que está me tirando noites de sonos, recentemente resolvi me aventurar com o VUE e por já conhecer um pouco de JAVA, optei por criar uma aplicação com VUE+SpringBoot, até ai, tudo as mil maravilhas os textos são passados do VUE pro Spring e salvos no banco de dados perfeitamente, porém quando tento passar uma simples imagem pro backend tenho o seguinte problema:

Resolved (org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of byte() out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of byte() out of START_OBJECT token at (Source: (PushbackInputStream); line: 1, column: 74) (through reference chain: com.gym.spring.restapi.mariadb.model.News(“imgtitle”)))

Minha classe News.java :

package com.gym.spring.restapi.mariadb.model;


import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import java.util.Date;
import javax.persistence.Table;

@Entity
@Table(name = "news")
public class News {
 
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private long id;
 
  @Column(name = "type")
  private String type;

  @Column(name = "title")
  private String title;

  @Column(name = "body")
  private String body;
 
  @Column(name = "created")
  private Date created;
 
  @Column(name = "updated")
  private Date updated;

  @Column(name = "user")
  private String user;

  @Column(name = "imgtitle")
  private byte() imgtitle;
   
  public News(String type, String title, String body, Date created, Date updated, String user, byte() imgtitle) {
    this.type = type;
    this.title = title;
    this.body = body;
    this.created = created;
    this.updated = updated;
    this.user = user;
    this.imgtitle = imgtitle;
  }
 
  public long getId() {
    return id;
  }
 
  public void setType(String type) {
    this.type = type;
  }
 
  public String getType() {
    return this.type;
  }

  public void setTitle(String title) {
    this.title = title;
  }
 
  public String getTitle() {
    return this.title;
  }

  public void setBody(String body) {
    this.body = body;
  }
 
  public String getBody() {
    return this.body;
  }
 
  public void setCreated(Date created) {
    this.created = created;
  }
 
  public Date getCreated() {
    return this.created;
  }
 
  public Date getUpdated() {
    return this.updated;
  }
 
  public void setUpdated(Date updated) {
    this.updated = updated;
  }

  public void setUser(String user) {
    this.user = user;
  }
 
  public String getUser() {
    return this.user;
  }

  public byte() getImgtitle() {
    return imgtitle;
}
public void setImgtitle(byte() imgtitle) {
    this.imgtitle = imgtitle;
}
 
  @Override
  public String toString() {
    return "News (id=" + id + ", type=" + type + ", body=" + body + ", body=" + body + ", created=" + created + ", updated=" + updated + ", user=" + user + ", imgtitle=" + imgtitle + ")";
  }
}

Meu controller NewsController.java :

package com.gym.spring.restapi.mariadb.controller;

import com.gym.spring.restapi.mariadb.model.News;
import com.gym.spring.restapi.mariadb.repo.NewsRepository;
import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class NewsController {
  @Autowired
  NewsRepository repository;

  @GetMapping("/newsl")
  public List<News> getAllNewss() {
    System.out.println("Listando todas as notícias...");

    List<News> newsl = new ArrayList<>();
    repository.findAll().forEach(newsl::add);

    return newsl;
  } 

  @PostMapping("/news")
  public News postNews(@RequestBody News news) {
    News _news = repository.save(
      new News(
        news.getType(),
        news.getTitle(),
        news.getBody(),
        news.getCreated(),
        news.getUpdated(),
        news.getUser(),
        news.getImgtitle()
      )
    );
    return _news;
  } 

  @DeleteMapping("/news/{id}")
  public ResponseEntity<String> deleteNews(@PathVariable("id") long id) {
    System.out.println("Delete News with ID = " + id + "...");

    repository.deleteById(id);

    return new ResponseEntity<>("News has been deleted!", HttpStatus.OK);
  }

  @GetMapping("newsl/body/{body}")
  public List<News> findByBody(@PathVariable String body) {
    List<News> newsl = repository.findByBody(body);
    return newsl;
  }

  @GetMapping("newsl/type/{type}")
  public List<News> findByType(@PathVariable String type) {
    List<News> newsl = repository.findByType(type);
    return newsl;
  }

  @GetMapping("newsl/user/{user}")
  public List<News> findByUser(@PathVariable String user) {
    List<News> newsl = repository.findByUser(user);
    return newsl;
  }

  @GetMapping("newsl/title/{title}")
  public List<News> findByTitle(@PathVariable String title) {
    List<News> newsl = repository.findByTitle(title);
    return newsl;
  }

  @PutMapping("/news/{id}")
  public ResponseEntity<News> updateNews(
    @PathVariable("id") long id,
    @RequestBody News news
  ) {
    System.out.println("Update News with ID = " + id + "...");

    Optional<News> newsData = repository.findById(id);

    if (newsData.isPresent()) {
      News _news = newsData.get();
      _news.setType(news.getType());
      _news.setTitle(news.getTitle());
      _news.setBody(news.getBody());
      _news.setCreated(news.getCreated());
      _news.setUpdated(news.getUpdated());
      _news.setUser(news.getUser());
      _news.setImgtitle(news.getImgtitle());
      return new ResponseEntity<>(repository.save(_news), HttpStatus.OK);
    } else {
      return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }
  }
}

Meu newsRepository.java :

package com.gym.spring.restapi.mariadb.repo;
 
import java.util.List;
 
import org.springframework.data.repository.CrudRepository;
 
import com.gym.spring.restapi.mariadb.model.News;
 
public interface NewsRepository extends CrudRepository<News, Long> {
  List<News> findByTitle(String title);
  List<News> findByBody(String body);
  List<News> findByUser(String user);
  List<News> findByType(String type);
  List<News> findByImgtitle(byte() imgtitle);
}

E finalmente é claro minha página AddNews.vue :

<template>
  <div class="container-fluid uk-width-1-2@s">
    <div v-if="!submitted">      
         <input type="file" id="file" ref="myFiles" class="form-control" 
  @change="previewFiles" multiple/>
        <!--input
          type="file"
          class="form-control"
          id="imgtitle"
          required
          :v-model="news.imgtitle"
          name="imgtitle"
        />       
      <!--el-upload action="#" list-type="picture-card" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div class="form-group" slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog-->      
      <div class="form-group">
        <label for="type">Tipo</label>
        <input
          type="text"
          class="form-control"
          id="type"
          required
          v-model="news.type"
          name="type"
        />
      </div>

      <div class="form-group">
        <label for="title">Título</label>
        <input
          type="text"
          class="form-control"
          id="title"
          required
          v-model="news.title"
          name="title"
        />
      </div>

      <div class="uk-container">
        <ckeditor
          :editor="editor"
          id="body"
          name="body"
          class="form-control"
          required
          v-model="news.body"
          :config="editorConfig"
        ></ckeditor>
      </div>
      <br />
      <button v-on:click="saveNews" class="btn btn-primary">Enviar</button>
    </div>

    <div v-else>
      <h4>Sua notícia foi enviada com sucesso!</h4>
      <button class="btn btn-success" v-on:click="newNews">
        Adicionar nova notícia
      </button>
    </div>
    <br />
    <br />
  </div>
</template>
<script>
import http from "../http-common";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import VueUploadMultipleImage from "vue-upload-multiple-image";

export default {
  name: "add-news",
  data() {
    return {
      files: (),      
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      editor: ClassicEditor,
      editorData: "<p>Digite aqui seu texto.</p>",
      editorConfig: {
        // The configuration of the editor.
      },
      news: {
        id: 0,
        type: "",
        title: "",
        body: "",
        created: "",
        updated: "",
        user: "",
        imgtitle: "",
      },
      submitted: false,
    };
  },
  components: {
    VueUploadMultipleImage,
  },
  methods: {
     previewFiles() {
    this.files = this.$refs.myFiles.files
  },
    saveNews() {        
      var data = {
        type: this.news.type,
        title: this.news.title,
        body: this.news.body,
        imgtitle: this.$refs.myFiles.files,
        editorData: this.editorData,
        created: new Date(),
        updated: new Date(),
        user: localStorage.name,
      };
      http
        .post("/news", data)
        .then((response) => {        
          this.news.id = response.data.id;
          // eslint-disable-next-line no-console
          console.log(response.data);
        })
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.log(e);
        });
      this.submitted = true;
    },
    newNews() {
      this.submitted = false;
      this.news = {};
    },
  },
  /* eslint-enable no-console */
};
</script>

<style>
.submitform {
  max-width: 300px;
  margin: auto;
}
.ck-editor {
  width: 300px;
}
.ck-editor__editable {
  min-height: 500px;
}
#my-strictly-unique-vue-upload-multiple-image {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>

Agradeço desde já por qualquer ajuda.