图片file文件---二进制文件--base64的相互转化（vue)

1、file-----二进制文件

/**
 * file => base64
 * @param {*} file
 */
export function  asyncFileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      // target.result 该属性表示目标对象的DataURL
      resolve(e.target.result)
    }
  })
}
/**
 * imageFile => base64
 * @param {*} file
 */
export function  asyncImage2Base64(file) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = file
    img.onload = function() {
      var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      var dataURL = canvas.toDataURL('image/' + ext)
      resolve(dataURL)
      // console.log(11,dataURL)
    }
   
  })
}

2、二进制-----转文件

/**
 * 二进制转文件
 * @param {*} blobs blob对象
 * @param {*} fileName 文件名
 */
export function blob2File(blobs, fileName) {
  const blob = new Blob([blobs])
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  const aEle = document.createElement('a') // 创建a标签
  aEle.href = href
  aEle.download = fileName // 下载后文件名
  document.body.appendChild(aEle)
  aEle.click() // 点击下载
  document.body.removeChild(aEle) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

3、base64-----二进制

/**
 * 将base64编码转换为二进制文件
 * @param {*} base64
 */
export function base642File(base64) {
  const arr = base64.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}