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参照官网！！

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