Почему я всегда получаю пустой файловый объект в React?

Я создаю составную форму в React. Все работает нормально, кроме поля ввода файла.

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


                 <div className="col-lg-6 col-md-12">
                    <form encType="multipart/form-data" onSubmit={this.onSubmit}>
                     <div className="form-group">
                        <div className="custom-file mb-3">
                          <input
                            type="file"
                            className="custom-file-input"
                            id="gerberFile"
                            onChange={this.handleFileChange}
                          />
                          <label className="custom-file-label">
                            {gerberFileLabel}
                          </label>
                        </div>
                        {errors.gerberFile && (
                          <div className="alert alert-danger">
                            {errors.gerberFile}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

       handleFileChange = e => {
        const file = e.target.files[0];
        if (!(file.name.includes(".zip") || file.name.includes(".rar"))) {
          const errors = { ...this.state.errors };
          errors.gerberFile = "Gerberfiles are only allowed in .zip or .rar";
          this.setState({ errors });
        } else {
          console.log(`file ? ${JSON.stringify(file)}`);

          const formFields = { ...this.state.formFields };
          formFields.gerberFile = file;
          this.setState({ formFields });
          this.setState({ gerberFileLabel: file.name });
        }
      }

Странная часть заключается в том, что я могу использовать имя файла console.log и использовать его в качестве заполнителя. Однако всякий раз, когда я пытаюсь создать объект console.log File, я получаю пустой объект {}.

Что именно я делаю неправильно здесь? Я прошел через несколько руководств, кажется, все делают одно и то же, и, честно говоря, я не смог найти его на SO.

Я был бы очень признателен, если бы кто-нибудь мог мне помочь.


reactjs forms multipartform-data react-redux multipart
person MQ.    schedule 17.04.2020    source источник
comment
Что произойдет, если вы добавите свойство name="file" к входному файлу?   -  person Chunky Chunk    schedule 17.04.2020
comment
Я думаю, что у вас есть случай, аналогичный этому здесь: -event-having/60544360#60544360" title="Значение события раскрывающегося списка reactjs устанавливается в пустую строку, несмотря на то, что событие имеет"> stackoverflow.com/questions/60544186/ Вы пытаетесь сохранить что-то в состоянии в асинхронным способом, и когда вы делаете это, JavaScript уже аннулирует данные для параметра события.   -  person Enchew    schedule 17.04.2020
comment
@ TheDarkIn1978 Ничего, я даже пытался дать очень похожее имя, так как мой идентификатор не повлиял на имя.   -  person MQ.    schedule 17.04.2020
comment
@Enchew Я вижу ваш комментарий там, в какой-то степени он имеет смысл, но как насчет этого onChange={e =>console.log( file: ${JSON.stringify(e.target.files[0])})} он все еще регистрирует объект emtpy   -  person MQ.    schedule 17.04.2020
comment
Кстати, это было самое близкое, что я нашел в моем контексте, и @Enchew очень похоже на ваш ответ: stackoverflow.com/questions/47442839/ Однако моя проблема немного отличается от этой.   -  person MQ.    schedule 17.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Привет, я не уверен, чего вы пытаетесь достичь и что вы подразумеваете под «попытаться прочитать файл»?

Интерфейс File предоставляет информацию о файлах и позволяет JavaScript на веб-странице получать доступ к их содержимому.

Объект File — это особый вид BLOB-объектов, который можно использовать в любом контексте, в котором может использоваться BLOB-объект. В частности, FileReader, URL.createObjectURL(), createImageBitmap() и XMLHttpRequest.send() принимают как BLOB-объекты, так и файлы.

Таким образом, вы можете сохранить это в состоянии и вернуться.

Но если вам нужно прочитать содержимое файла, вам нужно использовать FileApi. Посмотрите на этот пример компонента.

Есть два обработчика: один читает файл onChange, а второй onSubmit.

Чтобы протестировать этот компонент, выберите текстовый файл.

const FileComp = () =>{
  const fileRef = React.useRef<HTMLInputElement>(null)

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const file = fileRef?.current?.files?.[0];

    if(file) {
      const reader = new FileReader();
      reader.onload = (e) =>{
        const res = e.target?.result;
        alert("Handle by onSubmit"+ res);
      };

      reader.readAsBinaryString(file);
    }
  }

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = fileRef?.current?.files?.[0];

    if(file) {
      const reader = new FileReader();
      reader.onload = (e) =>{
        const res = e.target?.result;
        alert("Handle by onChange"+ res);
      };

      reader.readAsBinaryString(file);
    }
  }

  return <div>
    <form onSubmit={onSubmit}>
      <input type="file" id="myFile" ref={fileRef} onChange={onChange}></input>
      <button type="submit">Submit</button>
    </form>
  </div>
}

Надеюсь, это поможет. Извините за машинопись.

person Ivan Mjartan    schedule 17.04.2020
comment
Извините, мой плохой, я должен написать, когда я пытаюсь зарегистрировать объект File, я получаю только пустой объект (сейчас я редактирую это). Мой вопрос не имеет ничего общего с рендерингом, рассматривайте его как форму профиля, где вы задаете кучу личных вопросов и фотографии пользователей. - person MQ.; 18.04.2020
comment
Проверьте, что такое файл ... это просто прокси для системы. Вы можете получить имя, но больше ничего, я думаю. - person Ivan Mjartan; 18.04.2020