所以这是我上传文件时的句柄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()
,但仍无效。
答案 0 :(得分:1)
e
中的事件对象image.src = e.target.result
是输入元素触发的事件。
您必须使用传递给onload
处理程序的事件元素:
reader.onload = (loadEvent) => {
//...
image.src = loadEvent.target.result;
//...
}
或读者对象:
reader.onload = (loadEvent) => {
//...
image.src = reader.result;
//...
}