Vue3组件el-upload的上传、删除

`el-upload` 是 `element-plus` 组件库中的一个上传组件，支持上传文件、图片、视频等类型的文件。下面是 `el-upload` 组件的上传、删除功能的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="onSuccess"
    :on-remove="onRemove"
    :file-list="fileList"
    list-type="picture-card"
    :auto-upload="false">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
import { reactive } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const state = reactive({
      fileList: []
    })

    const onSuccess = (response, file, fileList) => {
      // 上传成功的回调函数
      console.log('上传成功')
    }

    const onRemove = (file, fileList) => {
      // 删除文件的回调函数
      axios.delete(`/api/file/${file.name}`).then(() => {
        console.log('删除成功')
      })
    }

    return {
      state,
      onSuccess,
      onRemove
    }
  }
}

在这个示例代码中，我们假设后端提供了一个上传文件的API，该API的URL为`/api/upload`，同时也提供了一个删除文件的API，该API的URL为`/api/file/${fileName}`，其中`fileName`是要删除的文件的文件名。

在上传文件时，我们需要设置 `action` 属性为上传文件的API的URL，同时开启 `auto-upload` 属性，表示选中文件后自动上传。在上传成功时，会触发 `on-success` 属性指定的回调函数。

在删除文件时，我们需要在 `on-remove` 属性中指定删除文件的回调函数。在该回调函数中，我们向后端发送一个删除文件的请求，请求成功后，调用 `fileList` 对象的 `splice` 方法将该文件从文件列表中删除。