上传图片时无法在handle事件函数中获取event.target

时间:2017-12-20 08:15:57

标签: javascript reactjs event-handling

所以这是我上传文件时的句柄onChange函数

    handleLoadAvatar(e) {
    if (e && e.target.files) {
      const file = e.target.files[0];
      if (file && file.type.match(/image.*/)) {
        const reader = new FileReader();
        reader.onload = () => {
          const image = new Image();
          image.src = e.target.result; //get null here
          image.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = env.avatar_size;
            canvas.height = env.avatar_size;
            canvas.getContext('2d').drawImage(image, 0, 0, env.avatar_size, env.avatar_size);
            const dataUrl = canvas.toDataURL('image/jpeg');
            this.setState({ previewSrc: dataUrl, canvasAvatar: canvas, enableUpload: false });
          };
        };
        reader.readAsDataURL(file);
      }
    }
  }

这些代码过去一直很好用,直到最近我才收到这个警告:

  

警告:出于性能原因,会重复使用此合成事件。如果   你看到这个,你正在访问一个属性目标   已发布/无效的合成事件。这被设置为null。如果你必须   保持原始合成事件,使用event.persist()

我试图放event.persist(),但仍无效。

1 个答案:

答案 0 :(得分:1)

e中的事件对象image.src = e.target.result是输入元素触发的事件。

您必须使用传递给onload处理程序的事件元素:

reader.onload = (loadEvent) => {
    //...
    image.src = loadEvent.target.result;
    //...
}

或读者对象:

reader.onload = (loadEvent) => {
    //...
    image.src = reader.result;
    //...
}