```
基於專案需求需要把上傳成功的檔案圖示logo區別對待好一眼知道哪個檔案是ppt、哪個是圖片、哪個是word 哪個是文字txt等檔案型別；由於element-ui 的upload元件原始碼是寫死的此時需要copy一份原始碼稍加改造即可！如下：
<template>
  <transition-group
    tag="ul"
    :class="[
      'el-upload-list',
      'el-upload-list--' + listType,
      { 'is-disabled': disabled }
    ]"
    name
 
="el-list"
  >
    <li
      v-for="(file, index) in files"
      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
      :key="index.toString()"
      tabindex="0"
      @focus="focusing = true"
      @blur="focusing = false"
      @click="focusing = false"
    >
 

      <img
        class="el-upload-list__item-thumbnail"
        v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
        :src="file.url"
        alt
      >
      <a class="el-upload-list__item-name" @click="handleClick(file)">
        <!--
 
 <i class="el-icon-document"></i>{{file.name}} 原本的原始碼 以下是改造後的原始碼！就是一個i標籤即可-->
        <i class="ext-name-icon" :class="fileExtName(file.fName || file.name)"></i>
        <span class="file_f_name">{{file.fName || file.name}}</span>
      </a>
      <label class="el-upload-list__item-status-label">
        <i
          :class="{
          'el-icon-upload-success': true,
          'el-icon-circle-check': listType === 'text',
          'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
        }"
        ></i>
      </label>
      <i class="el-icon-close" v-if="!disabled && !file.fileDelete" @click="$emit('remove', file)"></i>
      <!-- 此為附件刪除按鈕 -->
      <el-progress
        v-if="file.status === 'uploading'"
        :type="listType === 'picture-card' ? 'circle' : 'line'"
        :stroke-width="listType === 'picture-card' ? 6 : 2"
        :percentage="parsePercentage(file.percentage)"
      ></el-progress>
    </li>
  </transition-group>
</template>
<script>
import ElProgress from "./progress";
export default {
  data() {
    return {
      focusing: false
    };
  },
  components: { ElProgress },
  props: {
    files: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    handlePreview: Function,
    listType: String
  },
  methods: {
    parsePercentage(val) {
      return parseInt(val, 10);
    },
    handleClick(file) {
      this.handlePreview && this.handlePreview(file);
    },
    fileExtName(name) {
      let iName = "";
      if (name && name.indexOf("xls") > -1) {
        iName = "ic_excel";
      }
      if (name && name.indexOf("fo") > -1) {
        iName = "ic_folder";
      }
      if (name && name.indexOf("g") > -1) {
        iName = "ic_img";
      }
      if (name && name.indexOf("pdf") > -1) {
        iName = "ic_pdf";
      }
      if (name && name.indexOf("ppt") > -1) {
        iName = "ic_ppt";
      }
      if (name && name.indexOf("doc") > -1) {
        iName = "ic_word";
      }
      return iName;
    }
  }
};
</script>

<style lang="scss">
.file_f_name {
  vertical-align: middle;
  word-wrap: break-word;
  word-break: break-all;
}
.ext-name-icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin-right: 5px;
  background: url("../../../assets/images/ic_commonfile.png") no-repeat center
    center;
  background-size: 100% 100%;
  &.ic_excel {
    background: url("../../../assets/images/ic_excel.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  &.ic_folder {
    background: url("../../../assets/images/ic_folder.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  &.ic_img {
    background: url("../../../assets/images/ic_img.png") no-repeat center center;
    background-size: 100% 100%;
  }
  &.ic_pdf {
    background: url("../../../assets/images/ic_pdf.png") no-repeat center center;
    background-size: 100% 100%;
  }``
  &.ic_ppt {
    background: url("../../../assets/images/ic_ppt.png") no-repeat center center;
    background-size: 100% 100%;
  }
  &.ic_word {
    background: url("../../../assets/images/ic_word.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
}
</style>

```

上傳元件的api參照官網！！

以上程式碼本人專案實測！！！真實可靠，請勿隨意轉載~轉載請註明出處~~~謝謝合作！