为什么我总是在 React 中得到空文件对象？

Question

我正在 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 上找不到它。

如果有人能帮助我，我将不胜感激。

Answer 1

您好，我不确定您要达到什么目的以及“尝试读取文件”是什么意思？

File 接口提供有关文件的信息并允许网页中的 JavaScript 访问其内容。

File 对象是一种特定类型的 Blob，可以在 Blob 可以使用的任何上下文中使用。特别是，FileReader、URL.createObjectURL()、createImageBitmap() 和 XMLHttpRequest.send() 接受 Blob 和文件。

因此，您可以将其存储在 state 中并返回。

但是如果你需要读取文件内容你需要使用 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>
}

希望这会有所帮助。对不起打字稿。