vue项目实战：element-ui上传组件 upload的源码改造

```
基于项目需求需要把上传成功的文件图标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参照官网！！

以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/13555109.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！