選擇文件的js方法

 

自定義的 file.js文件

let fileInputEle;
let fileInputHandlerDefer = {};
import { startsWith } from "lodash-es";
// 選擇文件
export const getFileByUserSelect = (limitTypes, multiple) => {
  if (!fileInputEle) {
    fileInputEle = document.createElement("input");
    fileInputEle.setAttribute("type", "file");
    fileInputEle.style.display = "none";
    fileInputEle.addEventListener("change", () => {
      if (fileInputEle.files && fileInputEle.files.length) {
        if (multiple) {
          fileInputHandlerDefer.resolve(fileInputEle.files);
        } else {
          fileInputHandlerDefer.resolve(fileInputEle.files[0]);
        }
      } else {
        fileInputHandlerDefer.reject();
      }
    });
  }
  fileInputEle.removeAttribute("multiple");
  fileInputEle.removeAttribute("accept");
  fileInputEle.value = "";
  if (multiple) {
    fileInputEle.setAttribute("multiple", "multiple");
  }
  if (limitTypes && limitTypes.length) {
    fileInputEle.setAttribute(
      "accept",
      limitTypes.map(one => (startsWith(one, ".") ? one : `.${one}`)).join(",")
    );
  }
  return new Promise((resolve, reject) => {
    fileInputHandlerDefer.resolve = resolve;
    fileInputHandlerDefer.reject = reject;
    fileInputEle.click();
  });
};

// 
export const readFile = (file, type, charset) => {
  let reader = new FileReader();
  return new Promise((resolve, reject) => {
    reader.onload = function () {
      resolve(this.result);
    };
    reader.onerror = function () {
      reject();
    };
    let method;
    switch (type) {
      case "arrayBuffer":
        method = "readAsArrayBuffer";
        break;
      case "binaryString":
        method = "readAsBinaryString";
        break;
      case "dataURL":
        method = "readAsDataURL";
        break;
      case "text":
        method = "readAsText";
        break;
    }
    // 只有 text 需要 charset 參數
    reader[method](file, charset || "uft-8");
  });
};

使用示例：

// 只允許選擇jpg和png圖片，且支持多選文件
getFileByUserSelect(["jpg","png"],true).then(files=>{
   console.log(files) 
})