el-upload 回显图标, 或展示图片

原文地址：自定义el-upload 回显图标, 或展示图片_玖伍玖伍的博客-CSDN博客

需求上传图片展示图片，上传文档展示文档图标

<el-upload class="upload-demo Dialog"
:file-list="multipleFileList"
drag
multiple
name="file"
accept='pdf,docx,txt,xlsx,ppt,mp4,MP4,avi,png,gif,jpg,jpeg'
:before-remove='removeSingle'
:on-success='successfun'
:before-upload="beforeUpload"
:http-request='uploadImg'>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传</div>
</el-upload>
<ul class="imgListDelete">
       <li v-for="item in imgarry"
       :key="item">
       <el-image :src="item"
       :preview-src-list="imgarry">
       </el-image>
       </li>
       </ul>

data(){
return{
   multipleFileList: [],
   imgarry: [],
   }
}
methods:{
successfun (response, file, fileList) {
localStorage.removeItem('img')
},
async uploadImg (f) {
let param = new FormData()
param.append('file', f.file)
const { data: res } = await axios.post('http://enn-product.test.fnwintranet.com/enn/product/file/oss/upload', param,
{
headers: {
'Content-Type': 'multipart/form-data'
}
})
if (!res.success) return this.$message.error('文件上传失败')
this.$message.success('文件上传成功')
let houzhui = f.file.name.split('.') // 获取上传文件的后缀
let title = document.getElementsByClassName('el-icon-document')[this.multipleFileList.length]
// [fileList.length-1] 这个需要特别注意，需要查看当前页面不上传之前有多少个后才能根据具体情况具体分析
if (houzhui[1] == 'png' || houzhui[1] == 'gif' || houzhui[1] == 'jpg' || houzhui[1] == 'jpeg') {
title.parentNode.style.display = 'none'
let filetemp = f.file
this.getBase64(filetemp).then((res) => {
console.log(filetemp);
let url = res
this.imgarry.push(url)
})
title.className = 'imgiconPDF'
} else if (houzhui[1] == 'pdf') {
title.className = 'imgiconPDF'
} else if (houzhui[1] == 'docx') {
title.className = 'imgiconPDF imgicondocx'
} else if (houzhui[1] == 'txt') {
title.className = 'imgiconPDF imgicontxt'
} else if (houzhui[1] == 'ppt') {
title.className = 'imgiconPDF imgiconppt'
} else if (houzhui[1] == 'xlsx') {
title.className = 'imgiconPDF imgiconxel'
} else if (
houzhui[1] == 'MP4' ||
houzhui[1] == 'mp4' ||
houzhui[1] == 'avi'
) {
title.className = 'imgiconvideo'
} else {
title.classList.add('el-icon-document') // 其他默认文档
}
this.file.attrValue = res.data.id
this.file.file = res.data
localStorage.setItem('img', JSON.stringify(this.file))
this.fileList.push(JSON.parse(localStorage.getItem('img')))
},
getBase64 (file) {
console.log(file);
return new Promise((resolve, reject) => {
let reader = new FileReader()
let fileResult = ''
reader.readAsDataURL(file)
//开始转
reader.onload = function () {
fileResult = reader.result
}
//转失败
reader.onerror = function (error) {
reject(error)
}
//转结束咱就 resolve 出去
reader.onloadend = function () {
resolve(fileResult)
}
})
},
// 文件删除
removeSingle (file, fileList) {
let ext = file.name.split('.')
let arr = this.fileList.filter(item => {
if (item.file.size !== file.raw.size) {
return item
}
})
if (ext[1] == 'png' || ext[1] == 'gif' || ext[1] == 'jpg' || ext[1] == 'jpeg') {
this.getBase64(file.raw).then((res) => {
this.imgarry.splice(this.imgarry.findIndex(item => item === res), 1)
})
}
this.fileList = arr
},

beforeUpload (file) {
const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
const whiteList = ['pdf', 'docx', 'txt', 'xlsx', 'ppt', 'mp4', 'MP4', 'avi', 'png', 'gif', 'jpg', 'jpeg']

if (whiteList.indexOf(fileSuffix) === -1) {
this.$message.error('上传文件只能是 pdf,docx,txt,xlsx,ppt,mp4,MP4,avi,png,gif,jpg,jpeg格式')
return false
}
const isLt1M = file.size / 1024 / 1024 < 100
if (!isLt1M) {
this.$message.error('上传文件大小不能超过 100MB')
return false
}
},
}

.Dialog /deep/ .el-icon-document {
display: none;
}
.Dialog /deep/ .el-upload-list__item .el-icon-upload-success {
color: #67c23a;
margin-top: 13px;
}
.Dialog /deep/ .el-upload-list__item .el-icon-close {
top: 10px;
}
.Dialog /deep/ .imgiconvideo {
display: inline-block;
width: 50px;
height: 50px;
background-size: 100% 100%;
margin-right: 10px;
background-image: url("../../assets/images/视频@2x.png");
}
.Dialog /deep/ .imgiconPDF {
display: inline-block;
width: 50px;
height: 50px;
background-size: 100% 100%;
margin-right: 10px;
background-image: url("../../assets/images/PDF@2x.png") !important;
}
.Dialog /deep/ .imgicondocx {
background-image: url("../../assets/images/WOR@2x.png") !important;
}
.Dialog /deep/ .imgicontxt {
background-image: url("../../assets/images/TXT@2x.png") !important;
}
.Dialog /deep/ .imgiconppt {
background-image: url("../../assets/images/PPT@2x.png") !important;
}
.Dialog /deep/ .imgiconxel {
background-image: url("../../assets/images/XEL@2x.png") !important;
}

el-upload 回显图标, 或展示图片相关推荐

el-upload上传图片成功，详情页回显base64格式的图片
上传图片,并传给后端图片格式是base64.在详情页需要回显图片在el-upload上,我们发现官网里图片回显时,文件数组里要配置好name和url,如下图: 当我们需要回显base64格式的图片时, ...
java 图片回显_java实现Simditor图片上传七牛云并回显
首先呢,我们有这样一个需求: 当图片上传Simditor时,将其保存到七牛云上,然后并回显在我们的Simditor中. 首先,需要我们有一个七牛云帐号,并且配置Simditor富文本编辑器. 其次,我 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】...
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】(修订版)...
前言只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 什么是EL表达式? 表达式语言(Expression ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】... 1
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
【.net】Ueditor中图片上传和图片回显路径的设置
在csdn六百多天的游侠今日现身江湖. 问题发生的背景: 所有项目代码中,图片上传都是固定存到一个图片专属的盘符,这样就可以整个盘符对所有图片进行备份以防丢失. 但是!有一个站点所引用的百度编辑器(主 ...

el-upload 回显图标, 或展示图片

el-upload 回显图标, 或展示图片相关推荐

最新文章

热门文章