效果图：
具体代码如下：
<template><div class="app-container"><div class="container"> <el-form :label-position="labelPosition" :colon="false" :model="form"><el-form-item label="其他材料上传" prop="" class="filesStyle" ><p>请您仔细阅读招租公告，并根据招租公告要求上传须提交的其他材料！</p><el-uploadref="pictureUpload" class="img-uploader":action="uploadAction":headers="headers":file-list="fileList":on-success="handleSuccess":on-progress="handleProgress":before-upload="beforeAvatarUpload" list-type="picture-card"accept=".jpg,.jpeg,.png,.JPG,.JPEG"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{file}"> <imgclass="el-upload-list__item-thumbnail":src="file.url" alt=""><p style="text-align: center;">{{ file.name }}</p><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleRemovePic(file)"><i class="el-icon-delete"></i></span></span></div></el-upload><el-dialog :visible.sync="dialogVisible" class="avatarImg"><img width="100%" :src="imageUrl" alt="" ></el-dialog></el-form-item></el-form></div> </div></template><script>import { getToken } from "@/utils/auth";import { getFile,addResource,getResInfo } from "@/api/framework/common"import { applyInfo} from '@/api/ServiceHall/bidding'export default {data() {return {labelPosition: 'top',form:{files:[],},uploadAction:process.env.VUE_APP_BASE_API+'/file/common/upload',headers: {Authorization: "Bearer " + getToken()},imageUrl:'',dialogVisible:false,fileList:[],name:'',attachment:[],upFile:[],resourceList:[],imgFile:[]};},components:{},props: {abaId: {type: String,default: ''},},created() {this.applyInfoImg()},methods: {//根据保存的id回显图片(根据自己的接口视情况而定)applyInfoImg(){this.fileList = [];this.upFile = [];if(this.abaId !=''){applyInfo(this.abaId).then(resp => {//console.log(resp)if( this.attachment){this.attachment=resp.data.files.split(',')this.attachment.forEach((f) => {this.upFile.push(f) let obj={}if(f){getFile(f).then(res =>{const url = window.URL.createObjectURL(res);getResInfo(f).then(resg =>{if(resg.data.length!=0){obj.name= resg.data[0].description;//if(resg.data[0].description.substr(-4)=='.pdf' || // resg.data[0].description.substr(-4)=='.PDF'){// obj.url=require("@/assets/images/center/PDF.png") // }else{obj.url= url;// }} obj.fileId= resg.data[0].fileId;this.fileList.push(obj)}) })} }); }})}},//给父组件传值setPicture(){this.files=this.upFile;this.$emit('imgUploads',this.files) },// handleProgress(event,file,fileList){//if(file.name.substr(-4)=='.pdf' || file.name.substr(-4)=='.PDF'){// file.url=require("@/assets/images/center/PDF.png") //}// },//图片上传handleSuccess(res, file, fileList){let oFile = {};getFile(res.data.fileId).then(res => {const url = window.URL.createObjectURL(res);oFile.url=url }) oFile.fileId=res.data.fileId this.upFile.push(oFile.fileId);addResource(res.data.fileId,{description:res.data.fileName}).then(res => {}) },beforeAvatarUpload(file) {if (file.type.indexOf("image/") == -1) {this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");}else{const isLt10M = file.size / 1024 / 1024 < 10;if (!isLt10M) {this.$message.error('上传头像图片大小不能超过 10MB!');}return isLt10M;} },handleRemovePic(file) {// 根据 url 的不同进行匹配删除let uploadFiles = this.$refs.pictureUpload.uploadFilesfor (var i = 0; i < uploadFiles.length; i++) {if (uploadFiles[i].fileId == file.fileId) {uploadFiles.splice(i, 1)}} console.log(uploadFiles)let imgFiles=uploadFiles.map(i=>i.fileId); this.upFile=imgFiles},//预览handlePictureCardPreview(file) {console.log(file)// if(file.name.substr(-4)=='.pdf' || file.name.substr(-4)=='.PDF'){// if(file.response !=undefined){//let obj={}//getFile(file.response.data.fileId).then(res =>{// const url = window.URL.createObjectURL(res);// obj.url= url; // window.open(obj.url, "_blank");//}) // }else{//let obj={}//getFile(file.fileId).then(res =>{// const url = window.URL.createObjectURL(res);// obj.url= url; // window.open(obj.url, "_blank");//}) // } // }else{ this.imageUrl=file.urlthis.dialogVisible=true// }}}}</script><style scoped lang="scss">.container{width: 900px;padding-left:80px;}::v-deep .filesStyle .el-form-item__label{color:#1092DD;font-weight:700}::v-deep .el-form--label-top .el-form-item__label {padding: 0 ;}.el-form-item {margin-bottom: 2px;}::v-deep .img-uploader .el-upload {border: 1px dashed #E9EBEF;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;width: 237px;height: 150px;}::v-deep .el-upload-list--picture-card .el-upload-list__item{width: 237px;height: 185px;border: none;border-radius: 0px;}.el-upload-list--picture-card .el-upload-list__item-thumbnail {width: 237px;height: 150px;border: 1px solid #c0ccda; border-radius: 6px;}::v-deep .avatarImg .el-dialog__header {padding: 20px;}::v-deep .img-uploader p { /* 文件名过长后显示省略号 */width: 237px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}::v-deep .el-upload-list--picture-card .el-upload-list__item {margin: 0 8px 0 0;}.el-upload-list--picture-card .el-upload-list__item-actions{width: 237px;height: 150px;}::v-deep .el-dialog{height: auto !important;.el-dialog__header {border-bottom:0px !important;}}</style>
注：注释代码的意思为，上传pdf文件，缩略图显示自定义图片(主要代码如下)
父组件使用子组件：
