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、利用字节数组处理转化获得



  • 相关阅读:
    【转】#pragma pack(push,1)与#pragma pack(1)的区别
    emwin 之变量定义位置
    【转】C语言字符串与数字相互转换
    【转】用emWin进度条控件做个表盘控件,效果不错
    emwin 之消息 WM_INIT_DIALOG
    emwin 之使用键盘数据发送函数的注意事项
    emwin 解决在A窗口上新建B窗口后‘只激活’B窗口问题
    【转】数学与编程——求余、取模运算及其性质
    hdu4831 Scenic Popularity(线段树)
    2014年百度之星程序设计大赛
  • 原文地址:https://www.cnblogs.com/waitingbar/p/11726295.html
Copyright © 2011-2022 走看看