[JavaScript知识库] input type=‘file‘ 获取文件 fileReader同步文件加载

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> input type=‘file‘ 获取文件 fileReader同步文件加载 -> 正文阅读

[JavaScript知识库]input type=‘file‘ 获取文件 fileReader同步文件加载

fileReader的load事件是异步的通过promise使其同步加载

export const loadFileAsync = (file: File): Promise<string | ArrayBuffer> =>
  new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = (e) => {
      resolve(e.target?.result ? e.target.result : "");
    };
    fileReader.onerror = (e) => {
      reject(e);
    };
  });

<input
  type="file"
  accept="image/*"
  onChange={async (e) => {
     /**
       * 文件大小 大于1M 不转换base64 防止文件过大
       */
      if (e.target.files && e.target.files.length) {
        if (e.target.files[0].size > 1024 * 1024) {
          changeImage({ ...params, url: URL.createObjectURL(e.target.files[0]), objectFit: "fill" });
        } else {
          const res = await loadFileAsync(e.target.files[0]);
          res && changeImage({ ...params, url: res as string, objectFit: "fill" });
        }
      }
    }}
 />