基于项目需求需要把上传成功的文件图标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"
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"
class
="el-upload-list__item-thumbnail"
v-if
="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
:src
="file.url"
<
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
>
<
label
class
="el-upload-list__item-status-label"
>
:class
="{
'el-icon-upload-success': true,
'el-icon-circle-check': listType === 'text',
'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
</
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
>
</
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参照官网！！
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！
