需求 上传图片展示图片，上传文档展示文档图标
<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/[email protected]") !important;
}
.Dialog /deep/ .imgicondocx {
background-image: url("../../assets/images/[email protected]") !important;
}
.Dialog /deep/ .imgicontxt {
background-image: url("../../assets/images/[email protected]") !important;
}
.Dialog /deep/ .imgiconppt {
background-image: url("../../assets/images/[email protected]") !important;
}
.Dialog /deep/ .imgiconxel {
background-image: url("../../assets/images/[email protected]") !important;
}