element-ui 文件上传并删除

要使用Element-UI进行文件上传并删除，你可以使用el-upload组件和一些自定义的方法来实现。首先，确保已经引入了Element-UI库。

1. 在el-upload组件上设置必要的属性，比如action、headers、file-list等。其中，action是指向上传文件的后端接口的URL，headers是请求头部信息，file-list是已上传的文件列表。

2. 监听el-upload组件的change事件，在事件处理函数中获取到上传的文件列表，并进行相应的操作。你可以使用v-for指令遍历已上传的文件列表，展示每个文件的信息。

3. 实现删除功能。在每个文件的展示区域，添加一个删除按钮，并为按钮绑定一个点击事件。在点击事件处理函数中，通过索引值找到要删除的文件在文件列表中的位置，并使用splice方法删除文件。同时，你还可以在删除文件时，向后端发送请求，告知后端删除该文件。

下面是一个示例代码，演示了如何使用Element-UI进行文件上传并删除：

<template>
  <el-upload
    class="upload-demo"
    action="your_upload_url"
    :headers="your_headers"
    :file-list="fileList"
    :on-change="handleChange"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []  // 存放上传的文件列表
    };
  },
  methods: {
    handleChange(file, fileList) {
      // file为当前上传的文件对象，fileList为已上传的文件列表
      this.fileList = fileList;
    },
    handleDelete(index) {
      // 通过索引值找到要删除的文件在文件列表中的位置，并删除
      this.fileList.splice(index, 1);
    }
  }
};
</script>

以上是基于Element-UI使用el-upload组件实现文件上传并删除的方法。你可以根据自己的需求进行进一步的定制和优化。更多关于Element-UI的使用，你可以参考Element-UI官方网站和CSDN博客提供的资源。希望对你有帮助！

: element-ui官网：https://element.eleme.＊＊＊net/qq_36437172/article/details/100034867