base64 vue

在Vue中，可以使用URL.createObjectURL()方法将Base64编码转换为URL。具体步骤如下：

1. 将Base64编码的字符串转换为Blob对象：

const base64Str = 'data:image/png;base64,iVBORwKGgoAAAANSUhEUgAAADIA...';
const blob = new Blob([atob(base64Str.split(',')[1])], { type: 'image/png' });

2. 使用URL.createObjectURL()方法将Blob对象转换为URL：

const url = URL.createObjectURL(blob);

3. 将URL绑定到img标签的src属性上：

<img :src="url" alt="image">

注意：使用完URL后，需要使用URL.revokeObjectURL()方法释放URL占用的内存。

URL.revokeObjectURL(url);

相关问题

file转base64 vue

在Vue中将文件转换为base64的方法可以使用以下代码：

getBase64(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      resolve(reader.result);
    };
    reader.onerror = function(error) {
      reject(error);
    };
  });
}

你可以在Vue组件中调用这个方法来将文件转换为base64：

this.getBase64(file).then(res => {
  this.base64Data = res;
});

这样，你就可以将文件转换为base64并将结果存储在Vue组件的数据属性中了。
#### 引用[.reference_title]
- *1* [vue+上传，将拿到的file转成base64地址](https://blog.csdn.net/qq_41619796/article/details/109644538)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue 图片file转Base64编码格式](https://blog.csdn.net/Zmz0202/article/details/129553850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue中base64和file文件类型的互相转换](https://blog.csdn.net/qq_39285178/article/details/118159284)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue base64

Vue 中可以使用 `btoa` 和 `atob` 函数来处理 Base64 编码和解码。`btoa` 函数可以将字符串转为 Base64 编码，而 `atob` 函数可以将 Base64 编码解码为原始字符串。

以下是一个示例：

// 编码为 Base64
let str = 'Hello, World!';
let base64Str = btoa(str);
console.log(base64Str); // 输出: "SGV＊＊＊G8sIFdvcmxkIQ=="

// 解码 Base64
let decodedStr = atob(base64Str);
console.log(decodedStr); // 输出: "Hello, World!"

在 Vue 组件中，您可以在需要的地方使用这些函数来处理 Base64 编码和解码。例如，在模板中使用计算属性：

<template>
  <div>
    <p>原始字符串: {{ originalString }}</p>
    <p>Base64 编码: {{ base64String }}</p>
    <p>解码结果: {{ decodedString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalString: 'Hello, World!',
      base64String: '',
      decodedString: ''
    };
  },
  computed: {
    base64String() {
      return btoa(this.originalString);
    },
    decodedString() {
      return atob(this.base64String);
    }
  }
};
</script>

这样，模板中会根据 `originalString` 的值动态计算出相应的 Base64 编码和解码结果。注意，在使用 `atob` 函数解码时，如果传入的 Base64 字符串不合法，会抛出一个异常，所以在实际应用中可能需要做一些错误处理。