FormData 文件上传提交表单请求400的问题

FormData 文件上传提交表单请求400的问题if (this.$refs.basicInfo.$refs.licenseNumberPhoto.$children[0].formData.append(“licenseNumberPhoto”, this.$refs.basicInfo.$refs.licenseNumbe…

项目场景:

前端使用 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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注