给一些el-upload替换已上传文件的例子

以下是一些使用 `el-upload` 组件的示例，用于替换已上传文件：

1. 替换单个已上传文件

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-remove="handleRemove"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      // 在这里可以处理上传成功后的响应数据
    },
    beforeUpload(file) {
      // 上传文件之前的回调函数
      // 在这里可以做一些文件检查，比如大小、类型等
    },
    handleRemove(file, fileList) {
      // 移除已上传文件的回调函数
      // 在这里可以做一些文件删除的操作
    },
    replaceFile(file, fileList) {
      // 替换已上传文件的代码
      // 在这里可以调用后端接口，将新文件上传到服务器，并且更新 fileList
      // 以下代码只是作为示例，需要根据实际情况进行修改
      this.fileList = fileList.map(item => {
        if (item.uid === file.uid) {
          return {
            ...item,
            url: 'https://new-file-url.jpg' // 新文件的 URL
          };
        } else {
          return item;
        }
      });
    }
  }
};
</script>

在上面的代码中，我们定义了一个名为 `replaceFile` 的方法，用于替换已上传的文件。在这个方法中，我们可以调用后端接口，将新文件上传到服务器，并且更新 `fileList`。

然后，在模板中，我们可以调用这个方法来替换已上传的文件。比如，我们可以在 `el-upload` 组件中添加一个自定义的按钮，然后在点击按钮的时候触发 `replaceFile` 方法：

<el-upload
  ...
  :on-remove="handleRemove"
>
  <el-button
    slot="extra"
    type="primary"
    size="small"
    @click="replaceFile(fileList[0], fileList)"
  >
    替换已上传文件
  </el-button>
</el-upload>

在这个例子中，我们假设已上传的文件只有一个，因此我们使用 `fileList[0]` 来获取这个文件的信息，并且将其作为参数传递给 `replaceFile` 方法。

2. 替换多个已上传文件

如果我们需要替换多个已上传的文件，可以使用 `el-table` 组件来展示已上传的文件列表，并且在列表中添加一个操作列，用于替换已上传的文件。以下是一个示例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
    >
      <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>

    <el-table
      :data="fileList"
      style="width: 100%"
      :cell-style="{ padding: '6px 0' }"
      :header-cell-style="{ padding: '6px 0' }"
    >
      <el-table-column
        prop="name"
        label="文件名"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="url"
        label="预览"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <el-image
            :src="row.url"
            style="width: 100%; height: 100%"
            :fit="fit"
            :preview-src-list="[row.url]"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
        fixed="right"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            @click="replaceFile(row)"
          >
            替换
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      // 在这里可以处理上传成功后的响应数据
    },
    beforeUpload(file) {
      // 上传文件之前的回调函数
      // 在这里可以做一些文件检查，比如大小、类型等
    },
    handleRemove(file, fileList) {
      // 移除已上传文件的回调函数
      // 在这里可以做一些文件删除的操作
    },
    replaceFile(file) {
      // 替换已上传文件的代码
      // 在这里可以调用后端接口，将新文件上传到服务器，并且更新 fileList
      // 以下代码只是作为示例，需要根据实际情况进行修改
      const index = this.fileList.findIndex(item => item.uid === file.uid);
      if (index !== -1) {
        this.fileList.splice(index, 1, {
          ...file,
          url: 'https://new-file-url.jpg' // 新文件的 URL
        });
      }
    }
  }
};
</script>

在上面的代码中，我们使用 `el-table` 组件来展示已上传的文件列表，并且在列表中添加了一个操作列，用于替换已上传的文件。当用户点击操作列中的 “替换” 按钮时，我们会调用 `replaceFile` 方法，然后在这个方法中更新 `fileList`。

需要注意的是，在这个例子中，我们假设每个文件都有一个唯一的 `uid` 属性。因此，在 `replaceFile` 方法中，我们可以通过 `uid` 来查找要替换的文件，并且将新文件的信息更新到 `fileList` 中。