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參照官網！！

以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！