How to send dynamic table with cells contains images as an array format to json file in vue js

Question

I have dynamic table in vue js where user in each row can enter images and other text or number inputs, I want to create function to change the uploaded images in each table row to base-64 string so that I can send the whole table as an array in jsonData file. I have created function called uploadImage() to convert image to base-64 but I do not know how save the function result within the table array in jsonData file. I want to get the table array in jasonDatafile file like this array. '''

    "imageTables": [{
    "sampleDepth": 15350,
    "sampleNumber": 3,
    "zoomFactor": 3,
    "image": "bas-64-image-2"
   }  ,
   { "sampleDepth": 1400,
    "sampleNumber": 2,
    "zoomFactor": 4,
    "image": "bas-64-image-1"
 
  }, 
   ],

My vue file

<template>
  <v-container>
    <v-form lazy-validation ref="form">
      <v-card class="pa-5">
          <v-list-item-title class="headline mb-2 pa-1">Well information</v-list-item-title>    
          <v-row>
    
              <v-text-field class="pa-1" label="Field abbreviation" @keyup="uppercase" required v-model="field"></v-text-field>
          </v-row>

          <v-row>
              <v-text-field class="pa-1" label="Field lines" @keyup="uppercase" required v-model="fieldLines"></v-text-field>
          </v-row>
      </v-card>  
    <table class="responsive-table">
   
    <thead>
    <tr>
      <th scope ="col">#</th>
      <th class="text-left">Sample Depth</th>
      <th class="text-left">Sample Number</th>
      <th class="text-left">Zoom Factor</th>
      <th class="text-left">Fossil Image </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(imageTable, index) in imageTables" :key="index">
      <td scope="row" class="trashIconContainer">
        <i class="far fa-trash-alt" @click="deleteimageRow(index, imageTable)"></i>
      </td> 
      <td data-label=sampleDepth> 
        <input  v-model="imageTable.sampleDepth" class="form-control" type="number"  />
      </td>
      <td data-label=sampleNumber>
        <input v-model="imageTable.sampleNumber" class="form-control" type="number"  />
      </td>
      
     <td data-label=ZoomFactor>
        <input v-model="imageTable.zoomFactor" class="form-control" type="number"  />
      </td>
       
      <td> 
         <v-file-input type="file" v-model="imageTable.image" :rules="photosrules" accept="image/png, image/jpeg, image/bmp" placeholder="Pick a Fossil photo" prepend-icon="mdi-camera" @change="uploadImage()"></v-file-input>
      </td>

      <td>
        <button    @click="deleteimageRow" class="is-danger">
          Delete
        </button>
      </td>
    
    </tr>
    </tbody>
   

  </table>
  <button type='button' class="btn btn-info" @click="addimageRow">
          <i class="fas fa-plus-circle"></i>
          Add
        </button>
 
       <v-row>
            <v-col>
            <v-btn width="100%" class="primary" :loading="isPdfGenerating" @click="generateReport(true)">Generate draft report</v-btn>
            </v-col>
          </v-row>
          <v-row>
            <v-col>
            <v-btn width="100%" class="primary" :disabled="!isPdfGenerated" @click="savePdf">Download generated report</v-btn>
            </v-col>
            <v-col>
            <v-btn width="100%" class="primary" :disabled="!isPdfGenerated" @click="generateReport(false)">Make report official</v-btn>
            </v-col>
            
          </v-row>
          
    </v-form>

  </v-container>
</template>
<script>

  export default {
    name: 'NannopaleoOperations',
    data: () => ({
      field:null,
      fieldLines:null,
      pdfData:null,
      imageTables: [{ sampleDepth: '', sampleNumber: '', zoomFactor: '',image:''}],
    }),
    created() {
      
    },
    methods:{
     
      addimageRow() {
                        this.imageTables.push({
                            sampleDepth: '',
                            sampleNumber: '',
                            zoomFactor: '',
                            image:'',
                           
                        });
                        },
      
      deleteimageRow(index, imageTables) {
                        var idx = this.imageTables.indexOf(imageTables);
                        console.log(idx, index);
                        
                            this.imageTables.splice(idx, 2);          
            
    
                    },
            
      uploadImage() {  
              const file = document.querySelector('input[type=file]').files[0]
              const reader = new FileReader()
              let rawImg;
              reader.onloadend = () => {
                 rawImg = reader.result;
                console.log(rawImg);
                 }
                 reader.readAsDataURL(file);
                console.log(file)
                },

      

      generateReport: function (isDraft=true) {
          this.$refs.form.validate()
          this.$emit('pdfGenerated', null)
          this.isPdfGenerating = true
          this.isPdfGenerated = false
          let jsonData = {
            field:this.field, 
            fieldLines:this.fieldLines, 
            imageTables:this.imageTables,
            key:this.$store.state.key,
            isDraft:isDraft,
          }
           console.log(jsonData)
         
          this.$axios.post(this.$backendUrl + '/nanopaleooperations', jsonData)
          .then(response => {
            console.log(response)
            this.pdfData = { data: response.data }
            this.$emit('pdfGenerated', this.pdfData)
            this.isPdfGenerated = true
            this.isPdfGenerating = false
            
          })


          .catch(error => {
              console.log(error)
              this.isPdfGenerating = false
              this.isPdfGenerated = false
              if (error.response.status==401)
              {
                   this.$emit('unauthorized')
              }
               if (error.response.status==404)
              {
                   window.alert(error.response.data.message)
              }
          })
           
          
          .then(function () {
            
          });
      },

      savePdf: function () {
        var blob = new Blob([this.pdfData.data], {type: "application/pdf"});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        var fileName = "Output";
        link.download = fileName;
        link.click();}
        
    }
  }
 
</script>