用vue3实现页面上传图片

可以使用Vue3的Composition API和HTML5的FormData对象实现页面上传图片。具体实现可以参考以下代码示例：

<template>
  <div>
    <input type="file" ref="uploadInput" @change="uploadImage">
    <button @click="submit">上传</button>
    <img :src="imageUrl" v-if="isImageUploaded">
  </div>
</template>

<script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const imageUrl = ref('');
      const isImageUploaded = ref(false);
      const uploadInput = ref(null);

      function uploadImage(event) {
        const formData = new FormData();
        formData.append('image', event.target.files[0]);
        // 发送图片上传请求
        // 可以使用axios或者fetch等库发送请求
        // 上传成功后将返回的图片地址赋值给imageUrl
        imageUrl.value = 'https://example.com/image.jpg';
        isImageUploaded.value = true;
      }

      function submit() {
        const formData = new FormData();
        formData.append('image', uploadInput.value.files[0]);
        // 发送表单数据请求
        // 可以使用axios或者fetch等库发送请求
      }

      return {
        imageUrl,
        isImageUploaded,
        uploadImage,
        submit,
        uploadInput,
      };
    },
  };
</script>