FileReader onLoad 未触发

Question

我有一个简单的反应组件，这是组件的要点：

<input ref={inputRef} type="file" hidden onChange={imageSelected} />
    <Button
      onClick={() => inputRef.current.click()}
      icon="upload"
      size="big"
      style={{ margin: 0, marginRight: "2px" }}
      fluid
      color="green"
/>

这是 onChange 函数：

  const imageSelected = (ev) => {
    if (ev.target.files && ev.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log(e.target.result);
      };
    }
  };

我没有在控制台收到任何输出，onload 没有触发，这是为什么？

Answer 1

你不用告诉它读什么。我假设它是来自命名的图像，所以你会使用 readAsDataURL

const imageSelected = (ev) => {
  const file = ev.target.files && ev.target.files[0];
  if (file) {
    const reader = new FileReader(); 
    reader.addEventListener("load", function () { 
      cosole.log(reader.result);
    }, false);
    reader.readAsDataURL(file);
  }
}

运行例子

const inp = document.querySelector('[type="file"]');
const img = document.querySelector('img');

const imageSelected = (ev) => {
  const file = ev.target.files && ev.target.files[0];
  if (file) {
    const reader = new FileReader(); 
    reader.addEventListener("load", function () { 
      img.src = reader.result;
    }, false);
    reader.readAsDataURL(file);
  }
}

inp.addEventListener("change", imageSelected);

<input type="file">
<img >

FileReader onLoad 未触发

FileReader onLoad not fireing

javascript

filereader

reactjs