我正在建立一个网站页面,并且想要提交一个包含多个字段的表单,并且后端API可以处理请求。
简化代码如下所示:
<form id="contact-form" @submit="postForm" ref="aGeniusForm">
<input type="text" name="companyName">
<input type="email" name="email">
<textarea type="text" name="question"></textarea>
<input type="file" name="file">
<form>
后端由Sprint Boot驱动,并且控制器代码为:
@RestController
@RequestMapping("/v1/emails")
class EmailController(
val emailService: EmailService,
val objectMapper: ObjectMapper
){
@PostMapping("/applications", consumes = ["multipart/form-data"])
@ApiOperation("Send a apply email")
fun sendApplyEmail(
@RequestPart body: ApplyEmailPostDto,
@RequestPart("files", required = false) files: List<MultipartFile>
): EmptyResponse {
emailService.sendApplyEmail(body, files)
return EmptyResponse
}
}
创建http请求的前端代码,麻烦出在postForm
方法中。
// Form component data
export default {
name: "SignupForm",
components: {},
data() {
return {
return {
form: {
companyName: "",
email: "",
question: ""
},
files: []
};
},
methods: {
postForm() {
let formData = new FormData();
// Blob is the point ↓ ↓ ↓
formData.append(
"body",
new Blob([JSON.stringify(this.form)], {
type: "application/json"
})
))
// It is the point ↑ ↑ ↑
// post request, "multipart/form-data"
axios.post(
URL,
formData, // the data to post
{
headers: {
"Content-type": "multipart/form-data"
}
}
)
.then(response => {
//...
})
.catch(error => {
//...
});
}
}
我知道Blob
在移动浏览器和Web视图中不受广泛支持,我认为不必使用Blob
。
但是后端开发人员坚持让我这样做。
如果前端代码如下所示
formData.append("body",this.form))
//or
formData.append("body",JSON.stringify(this.form)))
后端API返回代码400
,并显示消息:"media-type not supported"
设计API的kotlin开发人员宣布他无法轻松支持其他媒体类型。
我对Spring Boot
框架或Kotlin不太熟悉。所以我需要你们告诉我这是真的吗?
这种情况的最佳做法是什么?