Estoy tratando de enviar la imagen cargada al backend y estoy usando este enfoque para enviarla y dentro de los puntos finales hay muchas API definidas y a través de uno de los puntos finales estoy tratando de pasar esa imagen pero al final obtengo el error 504.

 <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>

aquí no puedo enviar fd que es una imagen para publicar API