I am attempting to send a file to a Java backend using axios and vue.js. The backend is functioning properly as I can successfully reach it using the provided curl command.
curl --location --request POST 'http://localhost:8081/steg/aaa' --form 'file=@"/home/mycomputer/Files/image.png"' -o result.png
However, when trying to perform the same action from the application GUI, I consistently receive a 400 error:
https://i.sstatic.net/YZtV5.png
I'm unsure why this might be happening. Here is the code for the component in question to see if it aligns with the behavior of the curl command:
<template>
<div class="steg">
<input type="file" @change="onFileSelected">
<input type="text" v-model="secretText" placeholder="edit me">
<button @click="onUpload"> Steg</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Steg",
data() {
return {
selectedFile: null,
secretText: null
}
},
methods: {
onFileSelected(event) {
this.selectedFile = event.target.files[0]
},
onUpload() {
const formData = new FormData()
formData.append('image', this.selectedFile, this.selectedFile.name)
axios.post('http://localhost:8081/steg/' + this.secretText, formData)
.then(response => {
console.log(response.status)
})
}
}
}
</script>
<style scoped>
</style>
Despite the working curl command, the Vue app isn't functioning correctly. In an effort to troubleshoot, I will include the relevant Java backend code below, even though I believe it to be correct:
@CrossOrigin
@RequestMapping(value = STEG_ENDPOINT, method = POST, produces = APPLICATION_OCTET_STREAM_VALUE)
public @ResponseBody
byte[] steg(@PathVariable String text, @RequestParam(value = "file", required = true) final MultipartFile file) throws IOException {
userInputValidator.validate(file.getBytes(), text);
return textStegService.steg(text, file.getBytes());
}
The Java debugger doesn't pinpoint any issues within the Java code, indicating that the problem lies within the request itself. However, the exact cause remains unclear at this time.