React 简单的表单文件上传答案

【问题标题】：React simple form file uploadReact 简单的表单文件上传
【发布时间】：2017-06-26 15:30:32
【问题描述】：

我正在编写一个表单作为 React 组件。我能够成功地将表单数据发布/修补到我的服务器（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 插件。

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

【问题讨论】：

请参阅stackoverflow.com/questions/47164372/…，了解我如何在 React 中处理上传文件

标签： ruby-on-rails reactjs formsy-react

【解决方案1】：

<File /> 组件与其他 <Input /> 组件非常相似，但它不返回 input 元素的 value（出于安全原因，其中包含 fake path），而是返回 HTML5 FileList组件的值。

要上传此数据，请使用FormData.append，然后使用XMLHttpRequest 或fetch 上传。

【讨论】：

【解决方案2】：

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

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

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

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

我已经设法将它存储在 FormData 对象中并使用 axios 发送它，完全没有问题

【讨论】：