Vue3组件el-upload的上传、删除异步怎么处理

在Vue3组件 `el-upload` 中，上传和删除是异步操作。为了保证数据的正确性，我们需要在上传和删除的回调函数中使用异步操作来更新文件列表。

下面是 `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 = async (response, file, fileList) => {
      // 上传成功的回调函数
      console.log('上传成功')
      await updateFileList()
    }

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

    const updateFileList = async () => {
      // 更新文件列表
      const response = await axios.get('/api/files')
      state.fileList = response.data.files
    }

    // 组件挂载时，获取文件列表
    updateFileList()

    return {
      state,
      onSuccess,
      onRemove
    }
  }
}

在这个示例代码中，我们使用了 `async/await` 来处理上传和删除操作的异步回调函数。在上传成功或者删除成功后，我们使用 `await` 关键字等待文件列表的更新完成。

在更新文件列表时，我们使用 `async/await` 来等待获取文件列表的异步操作完成。在获取文件列表的异步操作完成后，我们将返回的文件列表设置为 `fileList` 对象的值。

需要注意的是，在组件挂载时，需要获取文件列表并设置初始值。在这个示例代码中，我们将获取文件列表的操作封装到了 `updateFileList` 函数中，并在组件挂载时调用。