项目场景：

前端使用 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] || '')
        }
    }

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13445.html

form表单提交file_表单提交文件上传

项目场景：

问题描述：

原因分析:

解决方案：

相关推荐

发表回复