vue base64转图片并展示

在Vue.js中，你可以使用`FileReader API`配合`data-url`属性将Base64编码的图片转换成实际的HTML `<img>` 标签显示出来。以下是一个简单的步骤：

1. 获取Base64编码的图片数据：

const fileInput = document.getElementById('file-input'); // 假设你的输入框ID为file-input
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    const base64Data = e.target.result;
  };
});

2. 将Base64数据转换为`<img>`标签显示：

<img :src="base64Data" alt="图片描述" @error="handleError">

在Vue组件中，你需要维护一个data属性来保存Base64数据，并在需要的地方使用它：

export default {
  data() {
    return {
      base64Data: '',
    }
  },
  methods: {
    handleError() {
      console.error('Failed to load image');
    },
  },
}

当`FileReader`读取完成后，`onload`回调会更新`base64Data`，然后在模板上展示图片。