Rendering:
The specific code is as follows:
<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-upload
ref="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}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<p style="text-align: center;">{
{ file.name }}</p>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-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.uploadFiles
for (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.url
this.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>Note: The comment code means to upload a pdf file and display a custom picture in the thumbnail (the main code is as follows)
Parent component uses child component:
