vue3中base64

在Vue 3中使用base64编码和解码的方法如下：
1. 首先，在项目中安装js-base64依赖包。可以使用npm或yarn命令进行安装：

   npm install js-base64
   或
   yarn add js-base64

2. 在需要的文件中引入js-base64：

   import { Base64 } from "js-base64";

3. 使用js-base64进行编码和解码操作。例如，如果你需要解码后端传来的base64字符串，可以这样做：

   let decodedContent = Base64.decode(encodedContent);

其中，`encodedContent`是后端传来的base64字符串，`decodedContent`是解码后的内容。
4. 如果你需要将json数据进行base64编码，可以使用以下方法：

   let encodedData = Base64.encode(JSON.stringify(jsonData));

其中，`jsonData`是要编码的json数据，`encodedData`是编码后的字符串。

相关问题

Vue3 中base64转图片

在 Vue3 中，可以使用以下代码将 base64 编码的字符串转换为图片：

<template>
  <div>
    <img :src="imageUrl" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Str: "data:image/png;base64,iVBORw0KG...QmCC", // base64 编码的字符串
      imageUrl: "" // 用于显示图片的 URL
    };
  },
  mounted() {
    this.imageUrl = this.base64ToImageUrl(this.base64Str); // 将 base64 转换为图片 URL
  },
  methods: {
    base64ToImageUrl(base64Str) {
      let binaryStr = atob(base64Str.split(",")[1]); // 解码 base64 字符串
      let len = binaryStr.length;
      let bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
      }
      let blob = new Blob([bytes], { type: "image/png" }); // 创建 Blob 对象
      return URL.createObjectURL(blob); // 返回图片 URL
    }
  }
};
</script>

在上面的代码中，`base64Str` 是 base64 编码的字符串，`imageUrl` 是用于显示图片的 URL。在 `mounted` 钩子函数中，调用 `base64ToImageUrl` 方法将 `base64Str` 转换为 `imageUrl`。

`base64ToImageUrl` 方法中，首先使用 `atob` 方法解码 base64 字符串，然后将解码后的字符串转换为字节数组，并使用 `Blob` 对象创建二进制数据块。最后使用 `URL.createObjectURL` 方法将二进制数据块转换为图片 URL，并返回该 URL。

在模板中，可以使用 `img` 标签来显示图片，绑定 `src` 属性为 `imageUrl` 即可。

VUE3 绑定 base64

### 实现 Base64 数据绑定

在 Vue3 中，可以利用 `v-bind` 指令来动态地将 Base64 编码后的图像数据绑定到 `<img>` 标签的 `src` 属性上。具体来说，在模板部分通过插值表达式或计算属性的方式引入 Base64 字符串。

对于图片上传并转成 Base64 的场景，可以在 JavaScript 部分定义相应的方法用于读取文件对象并通过 `FileReader` API 将其转化为 Base64 编码字符串[^3]。一旦获取到了该编码字符串，则可以通过响应式的变量将其赋给组件内的某个状态字段，并最终借助于 `v-bind:src` 或者缩写形式 `:src` 来完成实际显示工作[^1]。

下面是一个完整的例子展示如何在一个简单的表单中实现这一功能：

<template>
  <div>
    <!-- 使用 v-bind 动态设置 src -->
    <img :src="imageSrc" alt="Preview Image"/>
    
    <!-- 文件选择器触发 change 事件时调用 handleFileSelect 方法 -->
    <input type="file" @change="handleFileSelect">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    // 定义一个可变的状态用来保存 base64 编码后的图片路径
    const imageSrc = ref('');

    /**
     * 处理文件选取逻辑
     */
    const handleFileSelect = async (event: Event) => {
      const target = event.target as HTMLInputElement;
      if(target.files && target.files.length){
        try{
          // 调用辅助函数获得 base64 结果
          const result = await getBase64(target.files[0]);
          // 更新视图中的图片源地址
          imageSrc.value = result;
        }
        catch(err){
          console.error('Failed to read file:', err);
        }
      }
    };

    /**
     * 获取指定文件对应的 base64 编码
     */
    const getBase64 = (file: File): Promise<string> => {
      return new Promise((resolve, reject)=>{
        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = ()=>{ resolve(reader.result?.toString() ?? ''); };
        reader.onerror = error=>{ reject(error); };
      });
    }

    return { imageSrc, handleFileSelect };
  },
});
</script>

此代码片段展示了当用户选择了新的图片文件之后，会自动更新页面上的预览区域以反映最新选择的内容。这里的关键在于使用了异步函数 `getBase64()` 来处理文件读取过程，并且确保只有成功解析出有效的 Base64 字符串才会去修改界面上的相关元素[^5]。