vue upload 圖片轉base6四、轉二進制數組，保存編碼數據到文件

功能需求

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)
      });
}