项目场景:
前端使用 formData 提交带文件上传的表单请求报400
问题描述:
前端将参数拼成 FormData 的格式,代码如下:
let formData = new FormData();
if (this.$refs.basicInfo.$refs.licenseNumberPhoto.$children[0].fileList[0]) {
formData.append("licenseNumberPhoto", this.$refs.basicInfo.$refs.licenseNumberPhoto.$children[0].fileList[0].raw);
}
for (let key in this.form) {
if (this.form.hasOwnProperty(key)) {
formData.append(key, this.form[key] || '')
}
}
this.$refs.form.validate(valid => {
addCar(formData).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.form.disabled = true;
this.changeMode();
}
}
}
})
后端是用一个对象和 HttpServletRequest 来接收的:
@PostMapping("/update")
public AjaxResult edit(TzCar tzCar, HttpServletRequest request) {
int result;
try {
result = tzCarService.updateTzCar(tzCar, request);
} catch (Exception e) {
logger.error(e.getMessage());
return AjaxResult.error(e.getMessage());
}
return toAjax(result);
}
调试的时候控制台有异常信息:
[Failed to convert property value of type ‘java.lang.String’ to required type ‘java.lang.Long’ for property ‘allowedPassenger’; nested exception is java.lang.NumberFormatException: For input string: “null”]
原因分析:
从控制台异常信息可以看到:出现了 “null” String类型的值,然后出现了类型转换异常。
思考这个 “null” 值,应该是前端 FormData 拼进去的,于是看了下 FormData 的 append 方法:
interface FormData {
append(name: string, value: string | Blob, fileName?: string): void;
...
}
很明显可以看到 append 接收的 value 值只能是 string | Blob 类型,应该是将 null 自动转化为了字符串“null” 。
解决方案:
前端也很好处理,append 的时候将 null 转化为空字符串:
for (let key in this.form) {
if (this.form.hasOwnProperty(key)) {
formData.append(key, this.form[key] || '')
}
}
今天的文章FormData 文件上传提交表单请求400的问题分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16848.html