vue3 typescript 如何将一个 blob 对象赋值给表单里一个变量

在 Vue3 中使用 TypeScript，如果你想将一个 `Blob` 对象赋值给表单组件的一个变量，你可以这样做：

首先，在组件的定义中，为这个变量指定正确的类型。假设你有一个名为 `fileInput` 的表单字段，你可以声明它接受 `Blob` 类型：

<template>
  <div>
    <input ref="fileInput" @change="handleFileChange" :type="isUploadForm ? 'file' : 'text'" />
  </div>
</template>

<script lang="ts">
import { Ref } from 'vue';

export default {
  data() {
    return {
      fileInput: {} as Ref<Blob | string>, // 初始为空的Blob或字符串
      isUploadForm: false, // 标记当前是否是上传表单
    }
  },
  
  methods: {
    handleFileChange(e: Event) {
      if (this.isUploadForm) {
        const file = e.target.files && e.target.files[0] as Blob; // 获取文件作为Blob对象
        this.fileInput.value = file; // 将Blob对象赋值给ref
      }
    },
  },
};
</script>

这里我们使用了 `Ref` 从 Vue 中获取对输入元素的引用，并将其初始类型设置为 `Blob | string`，表示它可以是 `Blob` 或 `string`。当用户选择文件时，`@change` 事件触发 `handleFileChange` 方法，通过 `e.target.files[0]` 获取到 `Blob` 对象，然后将其赋值给 `fileInput`。

注意，`<input>` 的 `type` 属性默认为 `'text'`，所以在非上传表单时，你应该将其改为 `'file'`，以便允许用户选择文件。