JS 实现文件base64、File、Blob、ArrayBuffer相互转换方法

目录
文章目录隐藏
  1. 1. file 对象转 base64
  2. 2. base64 转成 blob 上传
  3. 3. blob 转成 ArrayBuffer
  4. 4. buffer 转成 blob
  5. 5. base64 转 file
  6. 结语

今天码云笔记为大家介绍一下文件的二进制家族 js,file,base64,File,Blob,ArrayBuffer 之间相互转换的方法。

1. file 对象转 base64

let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)

2. base64 转成 blob 上传

function dataURItoBlob(dataURI) {  
    var byteString = atob(dataURI.split(',')[1]);  
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
    var ab = new ArrayBuffer(byteString.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);  
    }  
    return new Blob([ab], {type: mimeString});  
}

3. blob 转成 ArrayBuffer

let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
    console.log(result);
}
reader.readAsArrayBuffer(blob);

4. buffer 转成 blob

let blob = new Blob([buffer])

5. base64 转 file

const base64ConvertFile = function (urlData, filename) { // 64 转 file
  if (typeof urlData != 'string') {
    this.$toast("urlData 不是字符串")
    return;
  }
  var arr = urlData.split(',')
  var type = arr[0].match(/:(.*?);/)[1]
  var fileExt = type.split('/')[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], 'filename.' + fileExt, {
    type: type
  });
}

结语

以上就是今天码云笔记为大家总结的 JS 实现文件 base64、File、Blob、ArrayBuffer 相互转换方法,希望对大家有用。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JS 实现文件base64、File、Blob、ArrayBuffer相互转换方法

发表回复