如何使用KotlinJS与React实现表单提交，上传文件到外部服务器？

问题根因 #

你遇到的表单提交无文件的核心原因是文件选择输入框缺少name属性：浏览器提交原生表单时，只会将携带name属性的表单字段纳入请求内容，你给出的可运行原生HTML示例中，file输入框明确配置了name="file"，但KotlinJS代码里漏掉了这个配置。

修复后的代码 #

直接在文件输入框的attrs配置块中添加name属性即可：

private fun RBuilder.render() {
    form(
        method = FormMethod.post,
        encType = FormEncType.multipartFormData,
        action = "https://otherserver.com/upload"
    ) {
        styledInput {
            attrs {
                type = InputType.file
                accept = ".zip"
                multiple = false
                name = "file" // 新增这一行，和原生表单的name属性对应
           }
        }
        styledInput {
            attrs {
                type = InputType.submit
                value = "Test"
            }
        }
    }
}

可选排查项 #

如果修改后仍有问题，可以先替换styledInput为React提供的原生input组件测试，确认是否是你封装的styledInput没有正确透传name属性到原生DOM节点。

内容的提问来源于stack exchange，提问作者Splitframe