bug描述:
监听拖拽事件,第一次拖拽得不到上传的文件内容,第二次以后就能正常得到上传的文件内容
错误代码示例
//React
<input type="file" onDrop={(e: React.DragEvent<HTMLInputElement>) => newFile(e)} />
const newFile = (e: React.DragEvent<HTMLInputElement>) => {
const el = e.target as HTMLInputElement;
console.log(el.files); //这里第一次上传并未得到上传的内容
if (el.files?.[0]) {
(transImg.fileToUrl(el.files[0]) as Promise<string>).then((res: string) => {
console.log(res);
});
}
};
正确代码
错误原因,api调用错误
//React
<input type="file" onDrop={(e: React.DragEvent<HTMLInputElement>) => newFile(e)} />
const newFile = (e: React.DragEvent<HTMLInputElement>) => {
const fileBlob = e.dataTransfer.files[0]; //应当使用这个接口
(transImg.fileToUrl(fileBlob) as Promise<string>).then((res: string) => {
console.log(res);
});
};