功能需求

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79793.html

標籤：JavaScript

上一篇：nuxt中使用Vuex

下一篇：vscode分享代碼插件Polacode

vue upload 圖片轉base64、轉二進制陣列，保存編碼資料到檔案

功能需求

解決方法

問題1：

參考資料

具體代碼

問題2

參考資料

具體代碼

問題3

參考資料

具體實施

具體代碼