浏览器如何读取本地文件

在业务需求上，不免需要用户上传文件，我们来操作一些内容，但如何在前端代码中来完成这部分需求呢？

封装函数

// 文件转为内容文本
function readAsText(file, callback) {
  let reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function (e) {
    callback(this.result);
  };
  reader.onerror = function (e) {
    callback(null, e);
  };
}
// 文件转为地址
function readAsDataURL(file, callback) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    callback(this.reader);
  };
  reader.onerror = function (e) {
    callback(null, e);
  };
}
// 文件转为二进制
function readAsBinaryString(file, callback) {
  let reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function (e) {
    callback(this.reader);
  };
  reader.onerror = function (e) {
    callback(null, e);
  };
}

当然 有时候也需要将文件 Base64 编码转为文件类型

function Base64ToFile(dataURL, fileName = 'file') {
  let arr = dataURL.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let suffix = mime.split('/')[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${fileName}.${suffix}`, { type: mime });
}