React 简单表单文件上传

Question

我正在写一个表单作为 React 组件。我能够成功地将 post/patch 表单数据发送到我的服务器 (Rails 5 API)。但是，我正在努力查看如何将文件附加到有效载荷。

使用我当前的文件上传实现，当表单发布到服务器时，参数如下所示：

  Parameters: {"theme"=>{"slug"=>"sonair", ... "primary_asset_attachment"=>{"0"=>{}}}, "theme_id"=>"sonair"}

我的预期是 primary_asset_attachment 会包含对该文件的引用。

    <FRC.Form
      onSubmit         =   { this.submitForm }
      validationErrors =   { this.state.validationErrors } >

      .... contents elided ....

      <File
        name           =   "primary_asset_attachment"
        label          =   "Theme Image"
        help           =   "Please attach an image"
      />
    </FRC.Form>

我正在使用名为 Formsy 的 React 插件，如果有帮助的话。

显然我遗漏了一些相当关键的步骤。

Answer 1

<File /> 组件与其他 <Input /> 组件非常相似，但不是返回 input 元素的 value（其中包含 fake path for security reasons), it returns a HTML5 FileList作为组件的值。

要上传此数据，请使用 FormData.append and then upload using XMLHttpRequest or fetch。

Answer 2

解决这个问题的最简单方法是使用类型文件的输入，例如。

<input type="file" onChange={yourChangeHandler}/>

以及对应的事件处理函数如下：

function yourChangeHandler(event){
  let yourfile = event.target.files; 
}

我已经设法将它存储在一个 FormData 对象中，并使用 axios 毫无问题地发送它

React 简单表单文件上传

React simple form file upload

ruby-on-rails

reactjs

formsy-react