vue base64转码

在Vue中进行Base64编码和解码可以使用JavaScript自带的btoa和atob函数。btoa函数可以将字符串编码为Base64格式，而atob函数可以将Base64格式的字符串解码为原始字符串。

以下是一个示例代码，将一个字符串进行Base64编码并输出到控制台：

let str = 'Hello World!';
let encoded = btoa(str);
console.log(encoded);

输出结果为：`"SGVsbG8gV29ybGQh"`，这就是字符串"Hello World!"的Base64编码结果。

以下是一个示例代码，将一个Base64格式的字符串进行解码并输出到控制台：

let encoded = 'SGVsbG8gV29ybGQh';
let decoded = atob(encoded);
console.log(decoded);

输出结果为："Hello World!"，这就是Base64编码为"SGVsbG8gV29ybGQh"的原始字符串。

相关问题

vue如何设置base64转码后的内容为utf-8

在Vue中，可以使用atob()函数将Base64编码解码为原始字符串，然后使用decodeURIComponent()函数将已编码URI组件解码, 从而将UTF-8编码的字符串转换成JavaScript字符串。

例如：

let base64str = "VGhpcyBpcyBhIHRlc3Qh"; //假设这是一个Base64编码的字符串
let decodedStr = decodeURIComponent(atob(base64str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
console.log(decodedStr); //输出 "This is a test!"

在上面的代码中，我们首先使用atob()函数将Base64编码解码为原始字符串，然后使用split()函数将字符串转换为字符数组，并使用map()函数对每个字符进行操作，最后使用join()函数将字符数组转换回字符串。最终，我们得到了一个解码后的UTF-8字符串。

vue 引入b64转码

### 实现 Vue 项目中的 Base64 编解码

为了在 Vue 项目中实现 Base64 的编解码功能，可以采用多种方式引入 `js-base64` 库。

#### 方法一：全局注册

通过修改项目的入口文件 `main.js` 来使整个应用程序都可以访问到 Base64 工具函数。这可以通过扩展 Vue 原型来完成[^1]：

// main.js
import Vue from 'vue';
import {Base64} from 'js-base64';

Vue.prototype.$Base64 = Base64;
new Vue({
    render: h => h(App),
}).$mount('#app');

这样设置之后，在任何组件内部就可以直接调用 `$Base64.encode()` 和 `$Base64.decode()` 进行字符串的编码与解码操作了。

#### 方法二：局部导入

如果只需要在一个特定的组件里使用 Base64 功能，则可以在该组件内单独引入此库[^4]:

<script>
import { Base64 } from 'js-base64';

export default {
  name: 'ExampleComponent',
  methods: {
    encodeString() {
      const encodedData = Base64.encode('Hello, world!');
      console.log(encodedData);
    },
    decodeString() {
      const decodedData = Base64.decode('SGVsbG8sIHdvcmxkIQ==');
      console.log(decodedData);
    }
  }
}
</script>

以上两种方法均需先安装依赖包 `npm install --save js-base64` 才能正常使用这些 API 函数[^5]。

对于简单的应用场景来说，也可以选择直接利用 CommonJS 模块加载器的方式来进行引入[^2]:

let Base64 = require('js-base64').Base64;

console.log(Base64.encode('hello')); // aGVsbG8=
console.log(Base64.decode('aGVsbG8=')); // hello