zoukankan      html  css  js  c++  java
  • 文件转base64处理或转换blob对象链接

    一、文件转base64,代码:

    axios({
    method: 'get',
    url: apiPath.common.downloaddUrl,
    responseType: 'blob'
    }).then(res => {
      console.log(res)
    if (res && res.data && res.data.size) {
    const dataInfo = res.data
    let reader = new FileReader()
    reader.readAsDataURL(dataInfo)
    reader.onload = function (e) {
    const result = e.target.result
        console.log(result) // 打印base64链接
    }
    } else {
       // 文件损坏或是提示处理
     }
    })

    Tips、关键点:
    1、在一个请求中添加 responseType 为 blob
    2、利用 new FileReader() 处理转化获得


    二、文件转blob对象链接,代码:

    axios({
    method: 'get',
    url: xxx,
    responseType: 'blob'
    }).then(res => {
      console.log(res)
    if (res && res.data && res.data.size) {
    const dataInfo = res.data
      const blob = new Blob([dataInfo], {type: dataInfo.type})
      const u = window.URL.createObjectURL(blob)
      console.log(u) // 转化后的链接
    } else {
       // 文件损坏或是提示处理
     }
    })

    Tips、关键点:
    1、在一个请求中添加 responseType 为 blob
    2、利用 new Blob() 处理转化获得
    
    

    三、文件转blob对象链接后下载,代码:

    axios({
    method: 'get',
    url: xxx,
    responseType: 'blob'
    }).then(res => {
      console.log(res)
    if (res && res.data && res.data.size) {
    const dataInfo = res.data
       const blob = new Blob([dataInfo], {type: dataInfo.type})
       const u = window.URL.createObjectURL(blob)
       console.log(u) // 转化后的链接
       let a = document.createElement('a') // 动态创建a链接
      document.body.appendChild(a)
    a.href = u
    let setDownloadName = 'download' // 默认下载的文件名
    downloadName && (setDownloadName = downloadName) // downloadName 为方法传进行的值,动态命名。
    a.download = setDownloadName
    a.click()
    window.URL.revokeObjectURL(u) // 移除动态创建的a链接
    } else {
       // 文件损坏或是提示处理
     }
    })

    Tips、关键点:
    1、在一个请求中添加 responseType 为 blob
    2、利用 new Blob() 处理转化获得
    3、动态创建a链接,并模拟点击
    4、如果需要直接跳转展示,可把a.download 的相关处理去掉即可

    四、base64文件转blob对象链接,代码:

    const b64File = 'data.....'
    const contentType = url.substring(5, url.indexOf(';base64')) // 截取文件类型
    const b64Data = b64File.substring(b64File.indexOf(',') + 1) // 获得文件头外的数据
    const byteCharacters = atob(b64Data)
    const byteNumbers = new Array(byteCharacters.length)
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i)
    }
    const byteArray = new Uint8Array(byteNumbers)
    const blob = new Blob([byteArray], {type: contentType})
    const u = window.URL.createObjectURL(blob) // 获得的链接

    Tips、关键点:
    1、在base64文件中获得文件类型及真正的文件数据
    2、利用字节数组处理转化获得



  • 相关阅读:
    Pytest中参数化之Excel文件实战
    PyCharm 专业版 2018激活(pycharm-professional-2018.2.4.exe)
    python语言编写一个接口测试的例子,涉及切割获取数据,读取表格数据,将结果写入表格中
    webdriver之UI界面下拉框的选择
    git的安装与详细应用
    安装jenkins
    python对数据库mysql的操作(增删改查)
    批量执行测试用例
    面向对象中多态的讲解+工厂设计模式的应用与讲解
    面向对象
  • 原文地址:https://www.cnblogs.com/waitingbar/p/11726295.html
Copyright © 2011-2022 走看看