zoukankan      html  css  js  c++  java
  • vue upload 图片转base64、转二进制数组,保存编码数据到文件

    功能需求

    1.图片转base64

    2.base 64 转二进制数组

    3.保存二进制数据到文件下载到本地

    解决方法

    问题1:

    参考资料

    vue element upload图片 转换成base64

    具体代码

    getBase64(file) {
          return new Promise(function (resolve, reject) {
            let reader = new FileReader();
            let imgResult = "";
            reader.readAsDataURL(file);
            reader.onload = function () {
              imgResult = reader.result;
            };
            reader.onerror = function (error) {
              reject(error);
            };
            reader.onloadend = function () {
              resolve(imgResult);
            };
          });
    }
    beforeUpload(file) {
        this.getBase64(file).then(res => {
            console.log(res);
       })
    }

    问题2

    参考资料

    base 64 转bytes数组

    具体代码

        beforeUpload(file) {
          var fileName = file.name || ''
    
          this.getBase64(file).then(res => {
            // console.log(res);
     
            //二进制数组转换
            var bytes = window.atob(res.split(',')[1]);        //去掉url的头,并转换为byte
    
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
              ia[i] = bytes.charCodeAt(i);
            }
    
            console.log("ia", ia)
          });
    }

    问题3

    参考资料

    将内存中的数据保存为文件下载到本地

    具体实施

    参考资料里面的方法二

    具体代码

      function  downFile(json1) {
          var elementA = document.createElement('a');
    
          elementA.setAttribute('href', 'data:text/plain;charset=utf-8,' + json1);
          elementA.setAttribute('download', +new Date() + ".txt");
          elementA.style.display = 'none';
          document.body.appendChild(elementA);
          elementA.click();
          document.body.removeChild(elementA);
        },
    
     beforeUpload(file) {
          var fileName = file.name || ''
    
          this.getBase64(file).then(res => {
            // console.log(res);
            //二进制数组转换
            var bytes = window.atob(res.split(',')[1]);        //去掉url的头,并转换为byte
    
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
              ia[i] = bytes.charCodeAt(i);
            }
            this.downFile(ia)
            console.log("ia", ia)
          });
    }
  • 相关阅读:
    MySQL 中文显示乱码
    sprintf
    持续集成
    两个数据库中的数据同步问题(转)
    指针和引用的区别
    #define,const,typedef三者联系与区别
    [转载]selenium webdriver学习(八)
    PHPUnit学习安装
    CI是什么?
    图形界面的操作(转)
  • 原文地址:https://www.cnblogs.com/dawenyang/p/12986414.html
Copyright © 2011-2022 走看看