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

巴特西

文件转base64处理或转换blob对象链接

最新文章

热门文章