el-upload action 如何使用组件中的API

el-upload action是element-ui中的一个上传组件，用于上传文件。使用该组件的API有以下几个步骤：

在组件中引入el-upload组件和需要的其他组件：

import { ElUpload, ElButton } from 'element-plus'

在组件的data属性中定义一个变量，用于保存上传成功后的文件路径：

data() {
  return {
    imageUrl: '',
  }
},

在组件的template中使用el-upload组件，并配置上传的相关属性：

<el-upload
  action="/upload"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  :show-file-list="false"
>
  <el-button>上传文件</el-button>
</el-upload>

其中，action属性指定上传的URL地址，on-success属性指定上传成功后的回调函数，before-upload属性指定在上传之前的回调函数，show-file-list属性用于控制是否显示上传文件列表。

在组件的methods属性中定义handleSuccess和beforeUpload函数：

methods: {
  handleSuccess(response, file, fileList) {
    this.imageUrl = response.url;
  },
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
      this.$message.error('只支持jpg/png格式的图片');
    }
    if (!isLt2M) {
      this.$message.error('上传图片大小不能超过2MB');
    }

    return isJPG || isPNG && isLt2M;
  },
},

在handleSuccess函数中，将上传成功后的图片路径保存到imageUrl变量中。在beforeUpload函数中，可以对上传的文件进行一些限制，比如只允许上传jpg/png格式的图片，大小不能超过2MB。

这样就可以在组件中使用el-upload组件的API