[英]Unable to upload file with Vue.js and Axios
I am tying to upload a file to a Java back end using axios and vue.js.我想使用 axios 和 vue.js 将文件上传到 Java 后端。 I know the back end works well because if I use this curl command I can reach it without any problem.
我知道后端运行良好,因为如果我使用这个 curl 命令,我可以毫无问题地到达它。
curl --location --request POST 'http://localhost:8081/steg/aaa' --form 'file=@"/home/mycomputer/Files/image.png"' -o result.png
But when try to do the same from the app GUI i keep getting a 400 error:但是当尝试从应用程序 GUI 执行相同操作时,我不断收到 400 错误:
I don't know why could this be.我不知道为什么会这样。 Here I am adding the code of this component so to see if it matches the behaviour of the curl command:
在这里,我添加了这个组件的代码,以查看它是否与 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>
So I am not sure what it could be.所以我不确定它可能是什么。 the curl command works but vue app doesn't.
curl 命令有效,但 vue 应用程序无效。 Just in case I am going to upload here just the Java back end code but I think in there everything is ok.
以防万一我要在这里上传 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());
}
The Java debugger does not stop in the Java code, the 400 means it didn't get so far, something is wrong in the request, but I am not sure what. Java 调试器不会在 Java 代码中停止,400 表示它没有到目前为止,请求中有问题,但我不确定是什么。
Looks like you should use this.secretText
instead of this.secretText.value
when build the URL args.看起来你应该在构建 URL 参数时使用
this.secretText
而不是this.secretText.value
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.