当我在上传文件后尝试读取事件目标时返回为空答案

【问题标题】：Event target comes back as null when I try to read it after uploading a file当我在上传文件后尝试读取事件目标时返回为空
【发布时间】：2020-03-12 08:53:58
【问题描述】：

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

这是我的文件输入上传器：

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

这是我的处理程序：

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

【问题讨论】：

event.target.file 而不仅仅是文件

标签： javascript reactjs file

【解决方案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>
      );
    })}
  </>
);

【讨论】：

【解决方案2】：

这行得通。

const handleFileUpload = file => {
  console.log("This is the file");
  console.log(file.target.files[0]);
};

有关上传文件的更多信息，请参阅此处。 upload file

【讨论】：

始终建议链接到官方文档而不是一些随机网站。

【解决方案3】：

uploaded file 在目标的files array 中。

const handleFileUpload = file => {
  console.log("This is the file");
  // array of files with the following properties
  // name, type, lastModified , size
  console.log(file.target.files);
};

【讨论】：