我打算使用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表示它还没有完成,请求中出现了一些错误,但我不确定是什么。
1条答案
按热度按时间z4bn682m1#
看来你应该用
this.secretText
而不是this.secretText.value
当生成url参数时。