文件流互相转换（blob转base64,二进制流）-Toy模板网

这篇具有很好参考价值的文章主要介绍了文件流互相转换（blob转base64,二进制流）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

二进制流格式

blob转base64,前端,javascript,前端,html

blob格式

跟用input上传文件的获取到的差不多

blob转base64,前端,javascript,前端,html
用URL.createObjectURL(blob)转化后是这样

base64格式

blob转base64,前端,javascript,前端,html 文章来源地址https://www.toymoban.com/news/detail-686931.html

二进制流转blob

getFiles(res, type, filename) {
      // 创建blob对象，解析流数据
      const blob = new Blob([res], {
        // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为		  msword，excel为excel
        type: type
      });
      const a = document.createElement("a");
      // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
      const URL = window.URL || window.webkitURL;
      // 根据解析后的blob对象创建URL 对象
      const herf = URL.createObjectURL(blob);
      this.pdfUrl = herf;
    },

this.getFiles((res, "application/pdf;chartset=UTF-8");

blob转base64

    blobToBase64(blob, callback) {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        callback(e.target.result);
      };
      fileReader.readAsDataURL(blob);
    },

      this.blobToBase64(blob, (dataurl) => {
        this.pdfBase64 = dataurl;
        console.log("base64", this.pdfBase64);
      });

base64转blob

    base64ToBlob(code) {
      //Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
      code = code.replace(/[\n\r]/g, "");
      var raw = window.atob(code);
      let rawLength = raw.length;
      //转换成pdf.js能直接解析的Uint8Array类型
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      console.log(uInt8Array, "uInt8ArrayuInt8Array");
      console.log(new Blob([uInt8Array], { type: "application/pdf" }));
      return new Blob([uInt8Array], { type: "application/pdf" }); //转成pdf类型
    },

二进制流转base64

    getBase64(data) {
      const blob = new Blob([data], { type: "image/jpg" }); //类型一定要写！！！
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      })
    },