vue中使用Base64转码（Tinymce富文本保留HTML标签）

**Vue 中使用 Base64 转码**

在 Vue 应用中，经常需要处理图片、文件等类型的数据。然而，这些类型的数据通常需要进行 Base64 转码，以便在 JavaScript 中直接使用。特别是在使用富文本编辑器如 Tinymce 时，需要保留 HTML 标签，而 Base64 转码可以帮助实现这一点。

**什么是 Base64 转码**

Base64 是一种用于编码二进制数据的算法，它将二进制数据转换为一个只包含 ASCII 字符的字符串。这种编码方式通常用于在文本传输协议（TCP）中传输二进制数据，因为它可以避免 TCP 的二进制数据传输限制。

**为什么需要 Base64 转码**

在 Vue 应用中，Base64 转码有以下几个原因：

1. **图片和文件的处理**: 当我们需要在 Vue 中使用图片或文件时，我们通常需要进行 Base64 转码，以便在 JavaScript 中直接使用。
2. **富文本编辑器的支持**: Tinymce 等富文本编辑器需要保留 HTML 标签，而 Base64 转码可以帮助实现这一点。

**如何使用 Base64 转码**

下面是使用 Base64 转码的步骤：

1. **获取图片或文件**: 首先，我们需要获取图片或文件的二进制数据。
2. **进行 Base64 转码**: 然后，我们需要将二进制数据转换为 Base64 编码的字符串。
3. **使用 Base64 编码的字符串**: 最后，我们可以在 Vue 中直接使用 Base64 编码的字符串。

**示例代码**

下面是使用 Base64 转码的示例代码：

html<template>
 <div>
 <!-- 使用 Base64 转码的图片 -->
 <img :src="imageBase64" alt="图片">
 <!-- 使用富文本编辑器 -->
 <tinymce v-model="content" />
 </div>
</template>

<script>
import Tinymce from 'tinymce';
import { base64ToArrayBuffer } from 'base64-arraybuffer';

export default {
 data() {
 return {
 imageBase64: '', // Base64 编码的图片 content: '' // 富文本编辑器内容 }
 },
 mounted() {
 // 获取图片并进行 Base64 转码 const file = new File(['image.jpg'], 'image.jpg', { type: 'image/jpeg' });
 this.imageBase64 = base64ToArrayBuffer(file).then((arrayBuffer) => {
 return arrayBuffer;
 }).catch((error) => {
 console.error(error);
 });

 // 使用富文本编辑器 Tinymce.init({
 selector: '#tinymce',
 menubar: false,
 toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
 });
 }
}
</script>

javascript// base64ToArrayBuffer.jsexport function base64ToArrayBuffer(base64String) {
 return new Promise((resolve, reject) => {
 const arrayBuffer = new Uint8Array(base64String.length);
 for (let i =0; i < base64String.length; i++) {
 arrayBuffer[i] = base64String.charCodeAt(i);
 }
 resolve(arrayBuffer);
 });
}