I am trying to send uploaded image to the backend and using this approach to send it and inside apiendpoints there are many apis defined and through one of the end points I am trying to pass that image but at the end i am getting 504 error.

<template>
         <div class="row">
            <input type="file" @change="previewImage" accept="image/*" />
          </div>
        </template>
        
    <script>
        import { apiEndpoints } from '../../../../../utils/constants';
        Vue.use(Vuetify);
            
        export default {
          name: 'SwapOnboardingStepTwo',
          data: () => ({
            imageData: '',
          }),
          methods: {
            previewImage: function (event) {
              var input = event.target;
              if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = (e) => {
                  this.imageData = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
              }
            },
             onUpload() {
              const fd = new FormData();
              fd.append('image', this.imageData)
            const body = {
            agreementImage: fd
          };
          try {
            const response = await this.$energyAxios.post(
              apiEndpoints.vehicleOnboard,
              body
            }
          },
        };
     </script>

here I'm not able to send fd that is image to post API