写一个vue3 的vue-upload-component 上传图片的完整的美观的，多文件上传示例

好的，下面是一个基于 vue-upload-component 的完整的美观的，多文件上传示例：

首先，我们需要安装 vue-upload-component：

npm install vue-upload-component --save

然后，在 Vue 组件中引入和使用 vue-upload-component：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :url="uploadUrl"
      :headers="uploadHeaders"
      :multiple="true"
      :data="{userId: userId}"
      :accept="'image/*'"
      :extensions="allowedExtensions"
      :maxSize="maxFileSize"
      :withCredentials="true"
      @input-filter="handleInputFilter"
      @before-upload="handleBeforeUpload"
      @uploading="handleUploading"
      @upload-success="handleUploadSuccess"
      @upload-error="handleUploadError"
    >
      <template v-slot:default>
        <div class="upload-area">
          <div v-if="!isUploading">
            <i class="iconfont icon-add"></i>
            <span class="text">点击上传</span>
          </div>
          <div v-else>
            <i class="iconfont icon-loading"></i>
            <span class="text">上传中...</span>
          </div>
        </div>
      </template>
    </vue-upload-component>
    <div class="preview-area">
      <div v-for="(file, index) in uploadedFiles" :key="file.id">
        <img :src="file.url" class="preview-image">
        <div class="preview-name">{{ file.name }}</div>
        <div class="preview-size">{{ fileSize(file.size) }}</div>
        <div class="preview-delete" @click="deleteFile(index)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
  import VueUploadComponent from 'vue-upload-component'

  export default {
    components: {
      VueUploadComponent
    },
    data() {
      return {
        userId: '123456',
        uploadUrl: 'https://example.com/upload',
        uploadHeaders: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        maxFileSize: 10 * 1024 * 1024, // 10MB
        isUploading: false,
        uploadedFiles: []
      }
    },
    methods: {
      handleInputFilter(uploadData) {
        // 文件过滤器
        if (uploadData.file.type.indexOf('image/') !== 0) {
          return Promise.reject('只能上传图片文件')
        }
        return Promise.resolve(uploadData)
      },
      handleBeforeUpload(uploadData) {
        // 开始上传前的回调
        this.isUploading = true
        return uploadData
      },
      handleUploading(uploadData) {
        // 正在上传的回调
        console.log('uploading', uploadData.progress)
      },
      handleUploadSuccess(uploadData) {
        // 上传成功的回调
        console.log('success', uploadData.url)
        this.uploadedFiles.push({
          id: uploadData.response.id,
          name: uploadData.file.name,
          size: uploadData.file.size,
          url: uploadData.response.url
        })
        this.isUploading = false
      },
      handleUploadError(uploadData) {
        // 上传失败的回调
        console.error('error', uploadData.error)
        this.isUploading = false
      },
      fileSize(size) {
        // 文件大小格式化
        if (size < 1024) {
          return size + 'B'
        } else if (size < 1024 * 1024) {
          return (size / 1024).toFixed(2) + 'KB'
        } else {
          return (size / 1024 / 1024).toFixed(2) + 'MB'
        }
      },
      deleteFile(index) {
        // 删除已上传的文件
        this.uploadedFiles.splice(index, 1)
      }
    }
  }
</script>

<style>
  .upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    cursor: pointer;
  }
  .text {
    margin-top: 10px;
    font-size: 16px;
    color: #666;
  }
  .iconfont {
    font-size: 48px;
    color: #ccc;
  }
  .icon-add:before {
    content: '\e600';
  }
  .icon-loading:before {
    content: '\e602';
    animation: loading 1s infinite linear;
  }
  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .preview-area {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .preview-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .preview-name {
    margin-top: 5px;
    font-size: 14px;
    color: #666;
  }
  .preview-size {
    margin-top: 5px;
    font-size: 14px;
    color: #666;
  }
  .preview-delete {
    margin-top: 5px;
    font-size: 14px;
    color: #f44336;
    cursor: pointer;
  }
</style>

上面的示例中，我们定义了一个上传区域的样式，当用户点击上传区域时，会触发 vue-upload-component 的文件选择框。用户选择图片文件后，会触发相应的回调函数，我们可以在这些回调函数中处理上传过程中的各种情况，比如文件过滤、上传前的准备工作、正在上传、上传成功、上传失败等。

接着，我们在组件中定义 uploadedFiles 数组，用于存储已上传的文件信息。当一个文件上传成功后，我们将该文件的信息添加到 uploadedFiles 数组中，并在页面上展示出来。用户可以通过点击删除按钮删除已上传的文件。

这个示例是一个多文件上传的例子，您可以根据实际需求进行修改和扩展。