2021-07-01 原生js获取文件数据

原理

1. 手动用js创建一个type为file的DOM元素。
2. 在读取到数据后，清空手动创建的DOM元素。返回得到的Promise类型的文件数据files。

const getFilesPromise = async () => {
  let thePromise = new Promise((resolve, reject) => {
    let theElement = document.createElement("input");
    theElement.type = "file";
    theElement.multiple = true;
    theElement.onchange = async () => {
      const theFiles = theElement.files; //数据位于[input标签]中的files属性里;
      theElement = null;//清空[input标签],释放缓存;
      return resolve(theFiles);
    };
    theElement.click();
  });
  return thePromise;
};

//异步环境中使用;
const theFiles = await getFilesPromise();//异步函数中读取文件;直接拿到的是FileList;

//同步环境中使用;
const thisFiles = getFilesPromise();//同步函数中读取文件;此时拿到的是Promise;
thisFiles.then((res)=>{
  //此时的res就是FileList;
})

说明

1. 非侵入式是指想要用户上传一个数据，不必去改动DOM骨架。
2. 由于用到了document，那么这些代码不能在非浏览器环境如node.js环境下使用。
3. 由于该方法为异步方法，故而最好是在异步函数里使用。当然也可以在同步函数的最后一步里使用。

来源

1. Promise
2. promise在文件读取时使用的方法（promise的基本使用方法）
3. input标签
4. Document.createElement()