vue3 ts 页面打开base64文件

要在Vue3中使用TypeScript和打开base64文件，你可以使用以下步骤：

1. 在Vue组件中定义一个data属性来存储base64数据，如下所示：

<template>
  <div>
    <button @click="openFile()">Open File</button>
  </div>
</template>

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

export default defineComponent({
  name: 'Base64File',
  setup() {
    const fileData = ref<string>('');

    function openFile() {
      // TODO: Open file and convert to base64
    }

    return {
      fileData,
      openFile,
    };
  },
});
</script>

2. 实现`openFile`方法来打开文件并将其转换为base64数据。你可以使用`FileReader`来读取文件并将其转换为base64，如下所示：

function openFile() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.jpg,.png,.pdf'; // 可以只选择某些类型的文件

  input.onchange = (event: any) => {
    const file: File = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      fileData.value = reader.result as string;
    };
  };

  input.click();
}

3. 在模板中使用`fileData`属性来显示base64数据，如下所示：

<template>
  <div>
    <button @click="openFile()">Open File</button>
    <div v-if="fileData">{{ fileData }}</div>
  </div>
</template>

这样你就可以在Vue3中使用TypeScript来打开base64文件了。