Реагируйте на простую загрузку файла формы

Я пишу форму как компонент 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>

Я использую плагин React под названием Formsy, если это поможет.

Очевидно, есть некоторые довольно важные шаги, которые я пропускаю.

Источник

2 ответа

Решение

<File /> компонент очень похож на другой <Input /> компоненты, но вместо возврата input элемента value (который содержит поддельный путь по соображениям безопасности), он возвращает HTML5 FileList в качестве значения компонента.

Чтобы загрузить эти данные, используйте FormData.append а затем загрузить с помощью XMLHttpRequest или же fetch,

Источник

Самый простой способ справиться с этим - использовать ввод файла типа, например.

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

и соответствующая функция обработчика событий следующим образом:

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

Мне удалось сохранить это в объекте FormData и отправил его с помощью Axios без проблем на всех

Источник
Другие вопросы по тегам