0

我正在写一个表单作为 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 插件。

显然，我缺少一些相当关键的步骤。

4

2 回答 2

2

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

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

于 2017-07-02T22:25:13.323 回答
1

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

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

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

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

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

于 2018-01-17T23:16:25.203 回答