Error uploading an image with Vue Js

Hi,

I'm trying to upload an image to a webApi, I did it with Angular but i need this with VUE js.

I'm displaying the image with a input file:

<input type="file" class="button-form" id="upload" @change="previewImage">

The previewImage function is this:

previewImage(event) {
      var input = event.target;
      /*console.log(input)      
      console.log(input.files)*/
      if (input.files && input.files[0]) {      
        var reader = new FileReader();        
        reader.onload = (e) => {          
          this.imageData = e.target.result;
          /*console.log(e.target.result)*/
        }
      console.log(input.files[0])              
      reader.readAsDataURL(input.files[0]);
      this.files = input.files[0];
      
      }      
    }

The when i click on UploadImage i got this function:

uploadImage() {
      /*if(!this.validateInput())
      {          
        return
      }*/
      var formdata = new FormData();
      formdata.append(0, this.files[0]); //I need to send this two values a key 0 and the file as a value
    this.$http.post('http://localhost:59489/api/fileUpload', formdata)
      .then(response => {
        /*console.log(imageUrl);*/        
        console.log(response)
        /*document.querySelector("#image").src = imageUrl;*/
      })
      .catch(function (err) {
        console.log(err)        
      })
    }

But i get an error 500 (internal server error) if it helps teh code that works with angular is this:

.controller('fupController', function ($scope, $http) {
        var formdata = new FormData();

        $scope.getTheFiles = function ($files) {
            $scope.imagesrc = [];

            for (var i = 0; i < $files.length; i++){
                var reader = new FileReader();
                reader.fileName = $files[i].name;

                reader.onload = function (event) {
                    var image = {};
                    image.Name = event.target.fileName;
                    image.Size = (event.total / 1024).toFixed(2);
                    image.Src = event.target.result;
                    $scope.imagesrc.push(image);
                    $scope.$apply();
                }

                reader.readAsDataURL($files[i]);
                console.log($files[i]);                
            }

            angular.forEach($files, function (value, key) { 
                console.log("****** this is the fucken value")
                console.log(value)
                console.log(key)
                console.log("******")
                formdata.append(key, value);
            })
        }

        $scope.uploadFiles = function () {
            console.log("This is the information of the formdata");
            console.log(formdata);
            var request = {
                method: 'POST',
                url: '/api/FileUpload',
                data: formdata,
                headers: {
                    'Content-Type': undefined
                }
            };

            $http(request).success(function (d) {
                alert(d);
                $scope.reset();
            }).error(function () {
                alert("Fiiled");
                $scope.reset();
            })
        }

        $scope.reset = function () {
            angular.forEach(
                angular.element("input [type = 'file']"),
                function (inputElem) {
                    angular.element(inputElem).val(null);
                }
            );
            $scope.imagesrc = [];
            formdata = new FormData();
        }
    })