Vue实现Base64编码与解码的代码示例

// 方法定义
methods: {
  encodeToBase64(data) {
    // 将数据转换为Uint8Array类型
    let uint8Array = new Uint8Array(data);
    // 创建Blob对象
    let blob = new Blob([uint8Array], {type: 'application/octet-stream'});
    // 创建一个读取器
    let reader = new FileReader();
    // 当读取完成后执行的回调函数
    reader.onloadend = (evt) => {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        this.base64Data = evt.target.result;
      }
    };
    // 开始读取Blob对象
    reader.readAsDataURL(blob);
  }
}

<template>
  <div>
    <button @click="encodeToBase64(imageData)">编码为Base64</button>
    <img :src="base64Data" alt="Base64 Image"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Data: '',
      imageData: [/* 你的图像数据 */]
    };
  },
  methods: {
    // 上述方法
  }
};
</script>

methods: {
  decodeFromBase64(base64String) {
    let byteCharacters = atob(base64String.split(',')[1]);
    let byteArrays = [];
    for (let i = 0; i < byteCharacters.length; i++) {
      byteArrays.push(byteCharacters.charCodeAt(i));
    }
    return new Uint8Array(byteArrays);
  }
}

<template>
  <div>
    <input type="text" v-model="base64Input" placeholder="输入Base64字符串">
    <button @click="decodeFromBase64(base64Input)">解码Base64</button>
    <pre>{{ decodedData }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Input: '',
      decodedData: ''
    };
  },
  methods: {
    decodeFromBase64(base64String) {
      let byteArray = this.decodeFromBase64(base64String);
      this.decodedData = Array.from(byteArray).join(', ');
    }
  }
};
</script>

npm install base-64

import base64 from 'base-64';

methods: {
  encodeToBase64(data) {
    return base64.encode(data);
  },
  decodeFromBase64(base64String) {
    return base64.decode(base64String);
  }
}

// 在main.js中定义过滤器
Vue.filter('toBase64', function(data) {
  // 编码逻辑
});
Vue.filter('fromBase64', function(base64String) {
  // 解码逻辑
});

<img :src="imageData | toBase64" alt="Base64 Image">
<pre>{{ base64Data | fromBase64 }}</pre>

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img :src="base64Image" alt="Base64 Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Image: ''
    };
  },
  methods: {
    handleFileChange(event) {
      let file = event.target.files[0];
      let reader = new FileReader();
      reader.onload = e => {
        this.base64Image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>