首页 > 解决方案 > 使用带有 enctype 的 Material UI 的 Button 组件

问题描述

所以我打算使用 Multer 来上传图片。我正在使用 Material UI 的按钮组件onClick道具。提交数据。我将按钮组件包装在表单标签中是否完成了同样的事情?如果不是,我该如何指定表单数据的编码方式?

<form enctype="multipart/form-data">
                <Button
                  color="primary"
                  onClick={this.onSubmit}
                  round
                  className={classes.footerButtons}
                >
                  Post
                </Button>
                <div className={classes.footerButtons}>
                  <ImageUpload />
                </div>
              </form>

标签: htmlreactjsmaterial-ui

解决方案


在 jsx 中,enctype 属性应该是 encType="multipart/form-data"。

onSubmit 需要在表单元素上,并且按钮的 type="submit"。

看起来像这样:

<form
  method="post"
  action=""
  encType="multipart/form-data"
  onSubmit={this.onSubmit}
>
  <Button
    type="submit"
  > Submit
  </Button>
</form>

推荐阅读