vue3➕ts封装图片上传

好的，以下是一个基于 Vue3 和 TypeScript 的简单的图片上传组件封装：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" />
    <button @click="upload">上传</button>
    <img :src="imageUrl" v-if="imageUrl" />
  </div>
</template>

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

export default defineComponent({
  name: 'ImageUploader',
  props: {
    uploadUrl: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const fileInput = ref<HTMLInputElement | null>(null);
    const imageUrl = ref<string>('');

    const handleFileChange = () => {
      const file = fileInput.value?.files?.[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          imageUrl.value = reader.result as string;
        };
      }
    };

    const upload = () => {
      const formData = new FormData();
      formData.append('file', fileInput.value?.files?.[0] as File);
      fetch(props.uploadUrl, {
        method: 'POST',
        body: formData,
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        });
    };

    return {
      fileInput,
      imageUrl,
      handleFileChange,
      upload,
    };
  },
});
</script>

在这个组件中，我们定义了一个 `uploadUrl` 属性来接受服务器端上传图片的 URL，然后定义了一个 `fileInput` 引用来引用 `input` 元素，再定义了一个 `imageUrl` 引用来保存上传后的图片地址。在 `handleFileChange` 方法中，我们使用 `FileReader` 对象将选择的图片读取为 base64 编码，并将编码后的字符串保存在 `imageUrl` 引用中。在 `upload` 方法中，我们创建一个 `FormData` 对象，将选择的图片放入其中，并通过 `fetch` 方法将其上传到服务器端。最后，我们将 `upload` 和 `handleFileChange` 方法绑定到相应的按钮和 `input` 元素的 `change` 事件上，以实现上传功能。

希望这个简单的示例能够帮助你封装一个图片上传组件。