我打算使用axios和vue.js将一个文件上传到java后端。我知道后端工作得很好，因为如果我使用这个curl命令，我可以毫无问题地访问它。

curl --location --request POST 'http://localhost:8081/steg/aaa' --form 'file=@"/home/mycomputer/Files/image.png"' -o result.png

但当尝试从应用程序gui执行相同操作时，我不断收到一个400错误：

我不知道为什么会这样。我在这里添加这个组件的代码，以便查看它是否与curl命令的行为匹配：

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

所以我不确定会是什么。curl命令可以工作，但是vue应用程序不能。以防万一，我要上传这里只是java后端代码，但我认为在那里一切都是好的。

@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());
    }

java调试器并没有在java代码中停止，400表示它还没有完成，请求中出现了一些错误，但我不确定是什么。