上传图片时无法在handle事件函数中获取event.target
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上传图片时无法在handle事件函数中获取event.target相关的知识,希望对你有一定的参考价值。
所以这是我上传文件时的句柄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;
//...
}
以上是关于上传图片时无法在handle事件函数中获取event.target的主要内容,如果未能解决你的问题,请参考以下文章
WordPress:尝试上传图片,media_handle_upload() 不起作用