Vue3文件上传删除功能

对于Vue3文件上传删除功能，你可以使用以下步骤：

1. 创建一个文件上传组件，在该组件中添加上传文件的功能。

2. 在文件上传组件中，添加一个删除文件的按钮。

3. 在点击删除按钮时，将该文件的文件名传递给一个删除文件的方法。

4. 在删除文件的方法中，使用axios或者其他的网络请求库，向后端发送一个删除该文件的请求。

5. 当后端成功删除该文件时，将该文件从文件列表中删除。

下面是一个简单的Vue3文件上传删除功能的代码示例：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="deleteFile">删除文件</button>
    <ul>
      <li v-for="(file, index) in fileList" :key="index">{{file.name}}</li>
    </ul>
  </div>
</template>

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

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

    const onFileChange = (event) => {
      const files = event.target.files
      for (let i = 0; i < files.length; i++) {
        state.fileList.push(files[i])
      }
    }

    const deleteFile = () => {
      const fileName = state.fileList[0].name // 假设只有一个文件
      axios.delete(`/api/file/${fileName}`).then(() => {
        state.fileList.splice(0, 1)
      })
    }

    return {
      state,
      onFileChange,
      deleteFile
    }
  }
}

在这个示例代码中，我们假设后端提供了一个删除文件的API，该API的URL为`/api/file/${fileName}`，其中`fileName`是要删除的文件的文件名。在点击删除按钮时，我们发送一个DELETE请求到该API，请求成功后，将该文件从文件列表中删除。