vue2 + element-ui upload上传非图片文件显示自定义图标
提示：这里是配合jQuery进行使用的，因为要修改dom，img的src，如没有安装jQuery请自行安装。
应用场景：包含新增提交、编辑回显提交场景,实例中使用的上传列表回显模式为照片墙模式:list-type=“picture-card”,效果图在最下面。
一、新增场景
解释：新增场景不需要考虑编辑时文件、图片回显操作，仅处理上传成功后图标替换即可。
代码如下（示例）：
1. html代码
<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}"
:on-success="handleSuccess" list-type="picture-card"
>
// 上传icon
<i class="el-icon-plus"></i>
//插槽，自定义鼠标经过显示的按钮
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
//预览操作
<span
class="el-upload-list__item-preview"
@click="handlePvew(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
//删除操作
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
2. js代码(这里用到了jq，因为要修改dom，img的src)
//上传成功
handleSuccess(res,file,fileList){
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里是根据文件名称来获取后缀名
let fix = fileList[index].name.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
return
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
//预览文件预览
handlePvew(file){
//拿到当前点击的文件，根据自己需求实现
},
//删除当前文件
handleRemove(file){
let index = this.$refs.upload.uploadFiles.indexOf(file)
this.$refs.upload.uploadFiles.splice(index, 1)
},
//提交时获取上传文件列表
submit() {
//这里拿到所有回显的文件列表，并处理成逗号拼接字符串
this.form.files = this.$refs.upload.uploadFiles.map(elem=>{
//我这里是使用的阿里oss上传，根据自己上传层级来
return elem.response.code.fullurl
}).join(',')
//后续提交代码
...
}
二、编辑场景
代码如下（示例）：
1. data中定义fileList变量
data() {
return {
fileList: []
}
}
2. 和新增一样，不过新加了一个file-list参数，用于回显
<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}"
:on-success="handleSuccess" :file-list="fileList" list-type="picture-card"
>
// 上传icon
<i class="el-icon-plus"></i>
//插槽，自定义鼠标经过显示的按钮
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
//预览操作
<span
class="el-upload-list__item-preview"
@click="handlePvew(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
//删除操作
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
3. js代码
代码如下（示例）：
// 请求数据详情接口，这里我把请求代码省略了，res.data.files就是请求来的文件数据
getDetail(){
//请求成功后，拿到新增上传的files文件，因为新增时转成逗号拼接的字符串了，这里要再转成数组
this.fileList = res.data.files.split(',').map(elem=>{
return {
url: elem
}
})
// dom回显成功后，替换回显图标，和新增那块代码一样
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里是根据文件路径来获取后缀名
let fix = this.$refs.upload.uploadFiles[index].url.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
return
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
// 上传成功
handleSuccess(res,file,fileList){
// 这里需要处理fileList数组，因为回显时赋值的那个fileList里的url和新上传的fileList里的url层级不同
let arr = fileList.map(elem=>{
if(elem.response){
return {
url: elem.response.code.fullurl
}
}else{
return {
url: elem.url
}
}
})
this.$nextTick(() => {
$('.el-upload-list__item').each((index)=>{
//这里使用的是arr，使用文件路径来获取后缀名
let fix = arr[index].url.split('.').pop()
if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
// 如果是图片文件则不做处理
} else{
$(`.el-upload-list__item-thumbnail:eq(${
index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
// 这里也可以用本地图片 require('@/assets/fire/WORD.png')
}
});
})
},
// 提交操作
submit() {
//同上，回显的fileList里的url和新上传的fileList里的url层级不同
let arr = this.$refs.upload.uploadFiles.map(elem=>{
if(elem.response){
return elem.response.code.fullurl
}else{
return elem.url
}
})
this.form.files = arr.join(',')
//后续提交代码
...
},
提示：预览和删除操作，与新增场景一致。
效果图
vue2 + jQuery + element-ui upload上传非图片文件显示自定义图标详细教程。
1. 新增场景
2. 编辑场景
3. 预览场景
