uniapp里vue3组合式有三个image，按钮点击上传图片后回显到图片image里，并且上传到图片大小不能超过100kb，图片的右上角有关闭按钮

在uniApp中使用Vue3的组合式API创建这样的功能，可以分为以下几个步骤：

1. 定义组件结构和数据：

<template>
  <div>
    <image v-if="selectedImage" :src="selectedImage" @click.close="closeImage"></image>
    
    <button @click="chooseImage">上传图片</button>
    
    <!-- 图片预览区域 -->
    <preview :visible.sync="previewVisible" :file="previewFile" @close="resetPreview"></preview>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Preview from '@/components/Preview.vue'; // 假设Preview是另一个组件

const selectedImage = ref(null);
let previewVisible = false;
let previewFile = null;

async function chooseImage() {
  const file = await uni.chooseImage({ limit: 1, sizeType: ['original'] }); // 限制只选一张原始图片
  if (file && file.length > 0) {
    const resizedImage = resizeImage(file[0]); // 缩放图片至不超过100KB
    if (resizedImage.size <= 100 * 1024) {
      setPreviewData(resizedImage, true); // 设置预览组件的数据
    }
  }
}

function setPreviewData(image, visible) {
  previewFile = image;
  previewVisible = visible;
}

function resizeImage(file) {
  // 实现图片压缩函数
  // 使用uniapp提供的resizeImage API 或者第三方库进行图片压缩
  // 这里只是一个示例，需要你自己填充实际代码
  // 假设返回的是压缩后的文件对象
  return { url: 'compressed_' + file.name, size: compressSize(file.size) };
}

function closeImage() {
  selectedImage.value = null;
}

function resetPreview() {
  previewVisible = false;
  previewFile = null;
}
</script>

2. 创建一个单独的预览组件 `Preview.vue`，包含关闭按钮：

<template>
  <view v-show="visible">
    <image :src="file.url" @touchstart.stop.prevent="close" />
    <button slot="right" type="button" @click="close">×</button>
  </view>
</template>
<script>
export default {
  props: ['file', 'close'],
};
</script>

记得导入并安装`uni-app-image-resizer`或者其他合适的图片压缩库来实现`resizeImage`函数。