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

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

0 голосов
/ 17 апреля 2020

Я создаю многочастную форму в 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.

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

1 Ответ

1 голос
/ 17 апреля 2020

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

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

Объект File - это определенный тип c большого двоичного объекта, который может использоваться в любом контексте, который может использовать 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>
}

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

...