用vue3+element写一个自定应上传组件

好的，以下是一个基于Vue3和Element Plus的自定义上传组件示例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :file-list="fileList"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :multiple="false"
      :limit="limit"
      :with-credentials="true"
      :show-file-list="false"
      :on-exceed="handleExceed"
    >
      <template #default>
        <div v-if="fileList.length === 0">
          <i class="el-icon-plus"></i>
          <div class="el-upload__text">{{ buttonText }}</div>
        </div>
        <div v-else>
          <img :src="fileList[0].url" class="el-upload-list__item-thumbnail">
        </div>
      </template>
      <template #tip>
        <div class="el-upload__tip">{{ tipText }}</div>
      </template>
    </el-upload>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    buttonText: {
      type: String,
      default: '上传头像'
    },
    uploadUrl: {
      type: String,
      default: '/api/upload'
    },
    tipText: {
      type: String,
      default: '只能上传jpg/png文件，且不超过500kb'
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  setup(props, context) {
    const fileList = ref([]);

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;

      if (!isJPG) {
        context.emit('upload-error', '上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt500k) {
        context.emit('upload-error', '上传头像图片大小不能超过 500KB!');
        return false;
      }
      return true;
    };

    const handleSuccess = (res, file) => {
      context.emit('upload-success', res);
      fileList.value = [];
    };

    const handleExceed = (files, fileList) => {
      context.emit('upload-error', `只能上传${props.limit}个文件`);
    };

    return {
      fileList,
      beforeUpload,
      handleSuccess,
      handleExceed
    };
  }
};
</script>

<style scoped>
.upload-demo {
  display: inline-block;
  margin-right: 8px;
}
.el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在这个示例中，我们使用了Element Plus的`el-upload`组件来实现文件上传功能。我们定义了一些props来设置上传组件的一些属性，如上传按钮的文本、上传文件的接口地址等。我们使用了Vue 3的Composition API来定义了一些响应式变量和方法，如`fileList`数组、`beforeUpload`方法、`handleSuccess`方法和`handleExceed`方法等。

在模板中，我们使用了Vue 3的`template`语法来自定义上传组件的UI。我们使用了`default`和`tip`插槽来分别设置上传按钮和提示文本的内容。在`default`插槽中，我们使用了`v-if`指令来根据`fileList`数组的长度来显示上传按钮或已上传的图片。在`tip`插槽中，我们使用了props中的`tipText`来设置提示文本的内容。

通过以上的代码示例，您就可以在Vue 3项目中使用Element Plus来实现一个自定义的文件上传组件了。