Question

我正在写一个表单作为React组件。我能够成功地将表单数据发布/修补到我的服务器（Rails 5 API）。但是，我很难看到如何将文件附加到有效负载。

使用我当前的文件上传实现，当表单发布到服务器时，params看起来像这样：

  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（包含{{3}出于安全原因，它会返回fake path作为组件的值。

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

Answer 2

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

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

和相应的事件处理函数如下：

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

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

反应简单的表单文件上传

2 个答案: