javascript - 当我上传文件后尝试读取事件目标时，事件目标返回为空

Question

我正在构建一个简历 uploader 表单，我想在上传后显示上传的文件名称。我有一个onChange更改上传文件时的处理程序，但是当我尝试读取事件的属性时，特别是我读取信息的目标位置，它返回为 null。

这是我的文件输入 uploader :

        <input
          id="upload-resume"
          className="update-profile__upload"
          type="file"
          onChange={handleFileUpload}
        />

这是我的处理程序:

  const handleFileUpload = file => {
    console.log("This is the file");
    console.log(file);
  };

Answer 1

访问所有文件属性。

const [filesState, setFilesState] = React.useState([]);

return (
  <>
    <input
      type="file"
      name="file-upload"
      onChange={e => {
        setFilesState(e.target.files);
      }}
    />
    <br />
    {Array.from(filesState).map((file, index) => {
      return (
        <div key={index}>
          <p>Name: {file.name}</p>
          <p>Type: {file.type}</p>
          <p>Size: {Number(file.size / 1000).toFixed(2)} KB</p>
        </div>
      );
    })}
  </>
);