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

Posted 2021-04-17

所以这是我上传文件时的句柄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()但仍然无法正常工作。

答案

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

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

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

或直接读者对象：

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