前端JS 实现文件Url、base64、File、Blob、ArrayBuffer相互转换方法_把files对象转为base64

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
file对象转换为 base64

let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)
base64 转换为 Blob
 
base64ToBlob(urlData) {
  let arr = urlData.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  return new Blob([u8arr], { type: mime });
base64 转换为 file
 
base64toFile(dataurl, fileName) {
  let arr = dataurl.split(",");
  // let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  return new File([u8arr], fileName);
Blob 转换为 blob地址
 
BlobToBlobURL(BlobFile，type) {
  let blob = new Blob([BlobFile], { type : type });// 图片："image/jpeg"
  const blobUrl = URL.createObjectURL(blob);
  return blobUrl ;
blob 转换为 ArrayBuffer
 
blobToArrayBuffer(){
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
    console.log(result);
reader.readAsArrayBuffer(blob);
buffer转换为 Blob
 
let blob = new Blob([buffer])
图片URL 转换为 blob和base64
 
urlToBlobBase64(imgUrl) {
  return new Promise((resolve) => {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
          resolve({ blob, base64: e.target.result });
        oFileReader.readAsDataURL(blob);
      } else {
        reject(new Error("异常"));
    xhr.send();
    xhr.onerror = () => {
      reject(new Error("异常"));
  });
Blob 转 base64
 
 function blobToDataURI(blob,callback) {
   var reader = new FileReader();
   reader.readAsDataURL(blob);
   reader.onload = function (e) {
     callback(e.target.result);
// 调用
 blobToDataURI(blobData, function (result) {
    console.log(result);
});
    const blob = base64ToBlob(sBaseFile);
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob);
    } else {
        const fileURL = URL.createObjectURL(blob);
        window.open(fileURL);//弹出ppf文件
base64ToBlob 方法在txt中，这里放不下了
				一、multer中间件
再上传文件时，我们通常会使用到他。Multer用于处理multipart/form-data 类型的表单数据。首先我们先安装它：
cnpm install multer --save
首先在form表单中我们需要设置enctype为：multipart/form-data表单类型。同时我们也需要用到fs模块对文件重命名。下面是单文件上传实例：
<!DOCT...
				最近在做项目过程中碰到一个需求，前端在上传文件或图片时传入的文件被后台强制改名，以至于下载（给的url）的时候无法获取到当前文件名称。故此，就有了下面的故事。  网上检索了一大堆下载时的方法，绝大部分都不能使用（坑人），现做一个整理，保证药到病除。废话不多说，咱们直接开始
本方法不适用于IE，不适用于IE，不适用于IE，测试兼容过程中发现用axios的GET请求会导致当前文件损坏，现在不知原因为何。本文部分参考某大神代码片段（找不到网址了，就不贴了）......
				前端将base64编码的内容转换成网络URL路径，可以使用以下两种方式：
1. 使用URL.createObjectURL方法将Blob对象转换成URL路径。
```javascript
function convertBase64ToUrl(base64Str) {
  // 将base64编码的内容转换成Blob对象
  const blob = dataURItoBlob(base64Str);
  // 使用 URL.createObjectURL 方法将 Blob 对象转换成 URL 路径
  const url = URL.createObjectURL(blob);
  // 使用该 URL 路径来显示图片或其他类型的文件
  displayFile(url);
function dataURItoBlob(dataURI) {
  // 将dataURI转换成Blob对象
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  return new Blob([ab], { type: mimeString });
在上面的代码中，`convertBase64ToUrl`函数接收一个base64编码的字符串，将其转换成Blob对象并使用`URL.createObjectURL`方法将其转换成URL路径。`displayFile`函数用于使用该URL路径来显示图片或其他类型的文件。`dataURItoBlob`函数用于将base64编码的字符串转换成Blob对象。
2. 直接使用base64编码的字符串作为URL路径。
```javascript
function convertBase64ToUrl(base64Str) {
  // 使用 base64 编码的字符串作为 URL 路径
  const url = `data:image/png;base64,${base64Str}`;
  // 使用该 URL 路径来显示图片或其他类型的文件
  displayFile(url);
在上面的代码中，`convertBase64ToUrl`函数接收一个base64编码的字符串，直接使用base64编码的字符串作为URL路径。`displayFile`函数用于使用该URL路径来显示图片或其他类型的文件。需要注意的是，直接使用base64编码的字符串作为URL路径可能会导致URL过长，不适合用于大文件的显示。