当前位置：网站首页>监听拖拽事件，第一次拖拽得不到上传的文件内容，第二次以后就能正常得到上传的文件内容

监听拖拽事件，第一次拖拽得不到上传的文件内容，第二次以后就能正常得到上传的文件内容

2022-07-16 13:39:00 【weixin_46787337】

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