读取本地图片转换成base64

<p-upload
    list-type="picture-card"
    :show-upload-list="false"
    :file-list="fileList"
    @change="handleUploadChange"
    :action="logoUplodeUrl" 
    :before-upload="beforeUpload"
    v-model="modalForm.systemLogo"
    >
    <!-- :customRequest ="customRequest" -->
    <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
    <div v-else>
      <p-icon :type="loading ? 'loading' : 'upload'" />
      <div class="ant-upload-text">
        上传
      </div>
    </div>
    <span class="delBox" v-if="imageUrl" @click.stop="delImg">删除</span>
    </p-upload>
    <p-popover  v-model="popVisible" trigger="click" placement="bottom">  
    <p-button-link>图标库</p-button-link>
    <div v-for="(name,index) in imgNameList" :key="index" slot="content" @click="hide" class="popContent">
      <img :src="require(`../../assets/icon_lib/${name}`)" class="imgSrc" @click="handleSelectImg(name)">
    </div>
</p-popover>


function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

mounted () {
    // 获取文件夹所有图片
    let imgSrcName = require.context('../../assets/icon_lib', false, /\.png$/).keys()
    this.imgNameList = imgSrcName.map(i=> i.slice(2))
},
methods:{
    // 格式大小等校验
    beforeUpload(file) {
      return new Promise((resolve,reject)=>{
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('请上传jpg/png格式图片!');
          return reject(false)
        } 
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('图片不得大于2MB!')
          return reject(false)
        }
        let filereader = new FileReader();
          filereader.readAsDataURL(file);
          filereader.onload = ()=> {
            const image = new Image();
            image.src = filereader.result;
            image.onload = ()=>{
              let w = image.width
              let h = image.height
              if (w >= 66 && h >= 66) {
                return resolve(true)
              } else {
                this.$message.error('图片不得小于66*66!')
                return reject(false)
              }
            }
          }
        return  isJpgOrPng && isLt2M
      })
    },
    //处理图片状态并转换格式
    handleUploadChange(info) {
      debugger
      this.fileList = [...info.fileList]
      if (info.file.status === 'uploading') {
        console.log(info.file, info.fileList)
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        let imageUrl = info.file.response.data
        this.modalForm.systemLogo = imageUrl
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          this.loading = false
        })
        this.$emit('change', this.fileList)  
      } else {
        // console.log(info.file.response)
        // this.$message.error(info.file.response)
      }
    },
    // 图片库选择
    handleSelectImg(name) { 
     this.imageUrl = require('../../assets/icon_lib/'+ name)
     let imgUrl =  this.imageUrl
     this.base64Image(imgUrl)
    },
    // 转换图片格式
    base64Image(imgUrl) {
        window.URL = window.URL || window.webkitURL
        var xhr = new XMLHttpRequest()
        xhr.open("get", imgUrl, true)
        xhr.responseType = "blob"
        let that = this
        xhr.onload = function(){
            if(this.status == 200){
                //得到一个blob对象
                var blob = this.response
                console.log("blob", blob)
                // 至关重要
                let oFileReader = new FileReader()
                oFileReader.onloadend = function(e){
                    // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                    // console.log(e.target.result)
                    that.modalForm.systemLogo = e.target.result
                }
                oFileReader.readAsDataURL(blob)
            }
        }
        xhr.send();
    },
}

base64转blob 上传

/**
 * 读取文件内容，返回字符串
 * @param file 文件
 */
export async function readFile(file: Blob) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      resolve(reader.result as string)
    }
    reader.onerror = reject
    // readAsText 使 result 一定是字符串
    reader.readAsText(file)
  })
}

export function dataURLtoBlob(base64: string) {
  var arr = base64.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}
export function uploadImgBlob(params) {
  var dddd = new File([params], '流程图.png', {
    type: params.type
  })
  var data = new FormData()
  data.append('file', params, '流程图.png')
  data.append('bucketName', 'xxx')
  return axios.post('/apixxxx/file/upload/image', data, {
    'Content-Type': "multipart/form-data",
  } as any)
}

export function uploadSvgBlob(params) {
  var dddd = new File([params], '流程图.svg', {
    type: 'svg'
  })
  var data = new FormData()
  data.append('file', params, '流程图.svg')
  data.append('bucketName', 'xxxx')
  return axios.post('/api/xxxx/file/upload', data, {
    'Content-Type': "multipart/form-data",
  } as any)
}

async function parseImgBlob(blob) {
      return uploadImgBlob(blob).then(res => {
        // that.$message.success('图片缓存成功...')
        return res.data
      })
    }