el-upload 内部显示文件 实现文件删除和删除

记录常见业务 难点页面。 比如文件上传需要在内部显示，文件名超出宽度处理 删除处理，以及flex 实现想要的效果。后续遇到了可以快速实现。

<template>
  <el-dialog
    title="上传文件"
    :visible.sync="dialogVisible"
    width="70%"
    @close="handleClose"
  >
    <div class="upload-container">
      <el-upload
        class="upload-demo"
        action=""
        :before-upload="beforeUpload"
        :on-change="handleChange"
        drag
        multiple
        :auto-upload="false"
        :show-file-list="false"
      >
        <div class="content-parent">
          <div class="upload-content">
            <div v-for="(fileItem, index) in fileList" :key="index">
              <div class="content-box">
                <div class="file-item">{{ fileItem.name }}</div>
                <i
                  class="el-icon-close"
                  @click.stop="removeFile(index)"
                  style="cursor: pointer; color: red;"
                ></i>
              </div>
            </div>
          </div>

          <div class="upload-text">
            提示
            <div class="upload-text-container">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </div>
        </div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

@Component({
  name: 'contractUploadDialog',
  components: {},
})
export default class extends Vue {
  dialogVisible = false
  private fileList: File[] = []

  // 打开对话框
  openDialog() {
    this.dialogVisible = true
  }

  // 关闭对话框
  handleClose() {
    this.dialogVisible = false
  }

  private get gotFile() {
    console.log('gotFile:', this.fileList)
    return this.fileList && this.fileList.length > 0
  }

  private beforeUpload(file: File) {
    console.log('beforeUpload:', file)
    this.fileList.push(file)
    console.log('beforeUpload:', this.fileList)
  }

  handleChange(file: any, fileList: any) {
    console.log('handleChange:', this.fileList)
    this.fileList = fileList
  }


  // 删除文件
  removeFile(index: number) {
    const fileName = this.fileList[index].name
    this.$confirm(
      `确定删除 <span style="color: red;">${fileName}</span> 该文件吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true, // 允许在消息中使用 HTML
      }
    )
      .then(() => {
        this.fileList.splice(index, 1)
      })
      .catch(() => {
        // 用户点击了取消，不执行任何操作
      })
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  .content-parent {
    margin: 10px 10px 10px 10px;
    display: flex;
    width: 100%;
    height: 200px;

    .upload-content {
      flex: 40%;
      display: flex;
      flex-direction: column;
      max-height: 180px; /* Set a maximum height for the container */
      overflow-y: auto; /* Enable vertical scrolling */
      .content-box {
        display: flex;
        .file-item {
          width: 360px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 10px;
          text-align: left; /* 将文件名左对齐显示 */
        }
      }
    }

    .upload-text {
      flex: 60%;
      display: flex;
      align-items: center;
      .upload-text-container {
      }
    }
  }
}
</style>