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

最新推荐文章于 2024-05-15 16:25:24 发布

weixin_46787337

最新推荐文章于 2024-05-15 16:25:24 发布

阅读量382

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_46787337/article/details/125814370

版权

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