vue base64转文件流

在 Vue 中将 Base64 转换为文件流的方法如下：

1. 首先将 Base64 编码字符串转换为 Uint8Array 类型的数据。

const base64Data = "data:image/png;base64,iVBORw0KG...";
const byteCharacters = atob(base64Data.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);

2. 使用 Blob 对象将 Uint8Array 转换为二进制文件流。

const blob = new Blob([byteArray], { type: 'image/png' });

3. 使用 URL.createObjectURL() 方法生成文件流的 URL。

const fileUrl = URL.createObjectURL(blob);

完整的代码示例：

<template>
  <div>
    <img :src="fileUrl" alt="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: ''
    }
  },
  mounted() {
    const base64Data = "data:image/png;base64,iVBORw0KG...";
    const byteCharacters = atob(base64Data.split(',')[1]);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: 'image/png' });
    this.fileUrl = URL.createObjectURL(blob);
  }
}
</script>