上传图像时无法在处理事件功能中获取事件目标

Question

，所以这是我上传文件

时的句柄on Change函数

    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);
      }
    }
  }

这些代码曾经完美工作，直到最近我得到了此警告：

警告：出于绩效原因，此综合事件被重复使用。如果 您正在看到这个，您正在访问A上的属性目标 释放/无效合成事件。这将设置为空。如果你必须 保持原始的合成事件，使用event.persist（）

我试图放置event.persist()，但仍然没有起作用。

Answer 1

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

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

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

或读取器对象直接：

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