file 、url 、base64、blob、string 互转

_Rookie._

已于 2024-01-31 10:10:04 修改

阅读量472

点赞数 7

文章标签： javascript 前端开发语言

于 2023-12-05 10:39:43 首次发布

本文链接：https://blog.csdn.net/gu2022_3_5_21_23/article/details/134800440

版权

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" class="file" />
  </body>
</html>
<script>
  let file = document.querySelector('.file');
  file.addEventListener('change', function () {
    let file = this.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload =async function (e) {
      console.log(this.result); //base64
      let blob = dataURLtoBlob(this.result);
      console.log(blob); //blob
      let base64 =await blobToDataURL(blob);
      console.log(base64);
    };
  });
  //base64转blob
  function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
  //blob转base64
  function blobToDataURL(blob) {
   return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        resolve(e.target.result);
      };
      // readAsDataURL
      fileReader.readAsDataURL(blob);
      fileReader.onerror = () => {
        reject(new Error('blobToBase64 error'));
      };
    });
  }
</script>

 //url转blob
  function urlToBlob(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.response);
        }
      };
      xhr.onerror = () => {
        reject(new Error('urlToBlob error'));
      };
      xhr.send();
    });
  }
  //blob转url
  function blobToUrl(blob){
    return window.URL.createObjectURL(blob);
  }

file 转base64 

let file = document.querySelector('.file');
  file.addEventListener('change', function () {
    let file = this.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = async function (e) {
      console.log(this.result); //base64
    };
  });

//blob转file
    function blobToFile(theBlob, fileName) {
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    }

 //file转blob
    function fileToBlob(file) {
        return new Blob([file]);
    }

 //file转base64
  function fileToDataURL(file) {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        resolve(e.target.result);
      };
      // readAsDataURL
      fileReader.readAsDataURL(file);
      fileReader.onerror = () => {
        reject(new Error('fileToBase64 error'));
      };
    });
  }
  //base64转file
  function dataURLtoFile(dataurl, filename) {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let suffix = mime.split('/')[1]; //图片后缀
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    //转换成file对象
    return new File([u8arr], `${filename}.${suffix}`, { type: mime });
  }

//string转file
  function stringToFile(str, filename) {
    let blob = new Blob([str]);
    return new File([blob], filename);
  }
  //file转string
  function fileToString(file) {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        resolve(e.target.result);
      };
      // readAsDataURL
      fileReader.readAsText(file);
      fileReader.onerror = () => {
        reject(new Error('fileToString error'));
      };
    });
  }

 //string 转 base64
  function stringToBase64(str) {
    return btoa(unescape(encodeURIComponent(str)));
  }
  //base64 转 string
  function base64ToString(base64) {
    return decodeURIComponent(escape(atob(base64)));
  }

 //base64转url
  function base64ToUrl(base64) {
    return URL.createObjectURL(base64);
  }
  //url转base64
  function urlToBase64(url) {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open('get', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function () {
        if (this.status == 200) {
          let blob = this.response;
          let fileReader = new FileReader();
          fileReader.onloadend = function (e) {
            let base64 = e.target.result;
            resolve(base64);
          };
          fileReader.readAsDataURL(blob);
        }
      };
      xhr.onerror = function () {
        reject(new Error('urlToBase64 error'));
      };
      xhr.send();
    });
  }

 // file 转 url
  function fileToURL(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        resolve(URL.createObjectURL(file));
      };
    });
  }
  //url 转 file
  function urlToFile(url, filename) {
    return fetch(url)
      .then(res => res.blob())
      .then(blob => new File([blob], filename));
  }