时间戳

首页 > 解决方案 > FileReader onLoad 未触发

javascript - FileReader onLoad 未触发

问题描述

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

<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 没有触发，因为，这是为什么呢？

标签： javascriptreactjsfilereader

解决方案

你不告诉它读什么。我假设它是命名中的图像，因此您将使用 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 >

推荐阅读