diff --git a/src/views/base/staff/index.vue b/src/views/base/staff/index.vue index 7a9607e..cdf82a8 100644 --- a/src/views/base/staff/index.vue +++ b/src/views/base/staff/index.vue @@ -176,8 +176,7 @@
- +
+ +

{{ file.name }}

+
+ + + @@ -203,6 +211,7 @@ +
@@ -213,7 +222,6 @@ 5){ + this.$message.warning('最多上传5张图片') + fileList = fileList.filter(item => { + return item.uid != file.uid + }) + } const fileListTemp = fileList.filter(item => { return item.uid != file.uid }); + if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){ this.$message.warning('文件格式不正确') fileList = fileList.filter(item => { @@ -666,6 +681,12 @@ const fileListTemp = fileList.filter(item => { return item.uid != file.uid }); + if(fileList.length > 5){ + this.$message.warning('最多上传5张图片') + fileList = fileList.filter(item => { + return item.uid != file.uid + }) + } if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){ this.$message.warning('文件格式不正确') fileList = fileList.filter(item => { @@ -702,6 +723,12 @@ const fileListTemp = fileList.filter(item => { return item.uid != file.uid }); + if(fileList.length > 5){ + this.$message.warning('最多上传5张图片') + fileList = fileList.filter(item => { + return item.uid != file.uid + }) + } if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){ this.$message.warning('文件格式不正确') fileList = fileList.filter(item => { @@ -1107,5 +1134,62 @@ display: none; } } + // ::v-deep .el-upload-list--picture-card .el-upload-list__item { + // overflow: revert !important; + // // width: 100%; + // // height: 100%!important; + // } + // .el-upload-list__item-thumbnail{ + // height: 100%!important; + // } + // ::v-deep.el-upload-list__item-thumbnail { + // width: 100%; + // height: 100%!important; + // object-fit: cover; + // } + // ::v-deep.el-upload-list--picture-card .el-upload-list__item{ + // overflow: auto; + // } + + .picture-card-container{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + .picture-card{ + width: 100%; + height: 100%; + object-fit:cover; + justify-content: center; + // border: 1px solid #ddd; + // border-radius: 4px; + } + .file-name{ + position: absolute; + bottom: -20px; + // margin-top: 8px; + text-align: center; + font-size: 14px; + color:#333; + z-index: 999999; + } + .file-overlay{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + color: #fff; + font-size: 20px; + } + + \ No newline at end of file