vue中将图片的base64转换成图片展示

在Vue中将图片的base64转换成图片展示可以通过以下步骤实现：

1. 首先，将base64字符串赋值给一个Vue组件的data属性，例如：

data() {
  return {
    imageBase64: 'data:image/png;base64,iVBORw0KG...'
  }
}

2. 在Vue模板中，使用`img`标签来展示图片，将`src`属性绑定到data属性中的base64字符串，例如：

<template>
  <div>
    <img :src="imageBase64" alt="">
  </div>
</template>

3. 如果需要将64字符串转换为文件对象，可以使用`fetch`函数将base64字符串转换为Blob对象，然后创建一个URL对象来展，例如：

methods: {
  convertBase64ToImage() {
    fetch(this.imageBase64)
      .then(res => res.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        // 使用url展示图片
      });
  }
}

这样就可以在Vue中将图片的base64字符串转换成图片展示了。

相关问题

vue2中base64转换成图片进行回显

在 Vue.js 的 2.x 版本中，如果你需要将 Base64 编码的图片数据转换成 HTML 的 `<img>` 标签显示出来，你可以按照以下步骤操作：

1. 首先，你需要有一个变量存储 Base64 的图片数据，例如：

data() {
  return {
    base64Image: 'your_base64_data_here',
  };
},

2. 然后，在模板中，你可以使用 `v-bind` 或者动态绑定的方式将 Base64 数据绑定到 img 的 `src` 属性上：

<template>
  <div>
    <img :src="decodeBase64(base64Image)" alt="Your Image" />
  </div>
</template>

<script>
export default {
  methods: {
    // 定义一个解码 Base64 的函数
    decodeBase64(str) {
      const buffer = window.atob(str);
      const mime = /^data:image\/(jpeg|png|gif);base64,/.exec(str);
      return `data:${mime ? mime[1] : 'text/plain'};charset=utf-8,${buffer}`;
    },
  },
};
</script>

这个 `decodeBase64` 函数会处理 Base64 字符串，并将其转换为合适的 `data-src` 格式。

vue中将base64图片转file文件格式

在Vue中将base64图片转为file文件格式可以通过以下步骤实现：

1. 首先将base64图片转为Blob对象，可以使用以下代码：

function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(','), 
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

2. 然后将Blob对象转为File对象，可以使用以下代码：

function blobToFile(theBlob, fileName){
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}

3. 最后将File对象上传到服务器或者进行其他操作，可以使用以下代码：

const file = blobToFile(dataURLtoBlob(base64Data), 'filename.jpg');
// 进行上传或其他操作