vue3 把base64转成file文件的问题--读取文件信息--获取表头--file转base64

vue3 把base64转成file文件的问题

网上有许多，我就随便复制了两个,但发现了一些问题

1.通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题。
// 将base64转换为文件
const dataURLtoFile=(dataurl, filename)=> {
  let arr = dataurl.split(",");
  let  mime = arr[0].match(/:(.*?);/)[1];
  let  bstr = window.atob(arr[1]);
  let  n = bstr.length;
  let  u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

//调用
let file = dataURLtoFile(base64Data, imgName);

2.先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题。
// 将base64转换为blob
const dataURLtoBlob=(dataurl)=> {
  let arr = dataurl.split(",");
  let  mime = arr[0].match(/:(.*?);/)[1];
  let  bstr = window.atob(arr[1]);
  let  n = bstr.length;
  let  u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}
// 将blob转换为file
const blobToFile=(theBlob, fileName)=> {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}
// 调用
let blob = dataURLtoBlob(base64Data);
let file = blobToFile(blob, imgName);
}

一，atob报错，报编码问题（Failed to execute 'atob' on 'Window': Th...），后来去网上查了一下

　　1，base64包含特殊字符要去掉

　　　　base64.replace(/%0A|\s/g,''))//去掉%和A，我没有试过，还有其它方法自行查找

　　2，借助 encodeURIComponent 和 decodeURIComponent 转义非中文字符

　　　　使用decodeURIComponent 转义decodeURIComponent(dataurl)把base64转成ASCII字符序列就可以了

二，文件名的问题

　　这里的文件名应该在后面加上一个格式不然后端可能会报错返回

　　

 如果不知道怎么上传file文件，可以查看这个：https://www.cnblogs.com/whenwei123/p/16384590.html

获取file信息

function readerData(rawFile: Blob) {
  //读取文件数据
  return new Promise<void>((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      if (e) {
        const data = e.target?.result
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const results = XLSX.utils.sheet_to_json(worksheet)
        const header = getHeaderRow(worksheet)
        // 遍历数据查看是否符合规范
        let typeExcepList = []
        let nullExcepList = []
        let nameExcepList = []
        let set = new Set()
        let mapExcep = new Map()
        results.forEach((item: any, index) => {
          // if(set.keys(item.name))
          // item.forEach((atrr: string) => {
          //   item.atrr
          // })
        })
        // console.log(results, "results");
        console.log(workbook.SheetNames, 'workbook.SheetNames')
        workSheetNames.value = workbook.SheetNames
      }
    }
    resolve()
    reader.readAsArrayBuffer(rawFile)
  })
}




调用
 readerData(blobFile)

 文件转base64

function getBase64(file) {
  // 获取文件转base64
  return new Promise(function (resolve, reject) {
    let reader = new FileReader()
    let Result = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      Result = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(Result)
    }
  })
}

获取表头

function getHeaderRow(sheet: { [x: string]: any }) {
  //表头
  // const headers = [];
  // const range = XLSX.utils.decode_range(sheet["!ref"]);
  // console.log(range, "range");
  // let C;
  // const R = range.s.r;
  // for (C = range.s.c; C <= range.e.c; ++C) {
  //   const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
  //   let hdr = "UNKNOWN " + C;
  //   if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
  //   headers.push(hdr);
  // }
  // return headers;
}