人员

src/views/base/staff/index.vue

@@ -177,7 +177,6 @@
             <el-upload
                 class = "upload-demo"
                 action="#" 
-                :limit="5"
                 :file-list="highImgList"
                 :show-file-list="true"
                 :auto-upload="false"
@@ -191,7 +190,16 @@
             <!-- 文件格式下载，图片格式预览 -->
             <div slot="file" slot-scope="{file}">
                 <img v-if="isImage(file)" class="el-upload-list__item-thumbnail"  :src="file.url" alt="">
-                <img v-else class="el-upload-list__item-thumbnail"  :src="urlTemp" alt="">
+                <div v-else class="picture-card-container" >
+                  <img class="picture-card" :src="urlTemp" alt="">
+                  <p class="file-name">{{ file.name }}</p>
+                </div>
+                <!-- <img v-else class="el-upload-list__item-thumbnail" :src="urlTemp" alt="">
+                <p class=""file-name>{{ file.name }}</p> -->
+                <!-- <div class="file-overlay">
+                  <p class="file-name">{{ file.name }}</p>
+                </div> -->
+                <!-- <p>{{ file.name }}</p> -->
                 <span class="el-upload-list__item-actions">
                   <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
                   <i class="el-icon-download" />
@@ -203,6 +211,7 @@
                   <i class="el-icon-delete" />
                   </span>
                 </span>
+               
             </div>
 
 
@@ -213,7 +222,6 @@
           <el-form-item label="电工作业证">
             <el-upload
                 action="#"
-                :limit="5"
                 :file-list="electricianImgList"
                 :show-file-list="true"
                 :auto-upload="false"
@@ -248,7 +256,6 @@
           <el-form-item label="其他作业证">
             <el-upload
                 action="#"
-                :limit="5"
                 :file-list="elseImgList"
                 :show-file-list="true"
                 :auto-upload="false"
@@ -627,9 +634,17 @@
             this.fileList = fileList;
         },
         handleChangeHighImgList(file, fileList) {
+          console.log(fileList.length)
+          if(fileList.length > 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;
+  }
+
   
   </style>