lw-cdp-ui 1.1.68 → 1.1.69

package/dist/components/lwUpload/index.vue

@@ -3,9 +3,11 @@
        :class="{ 'lw-upload-round': round }">
     <div class="view-img-list">
       <template v-for="(f, index) in fileList">
+        <!-- 图片显示 -->
         <div class="lw-upload__img"
              :style="style">
-          <el-image class="image"
+          <el-image v-if="accept.indexOf('image') > -1"
+                    class="image"
                     :src="getShowValue(f)"
                     :preview-src-list="fileList"
                     fit="cover"
@@ -18,6 +20,11 @@
               </div>
             </template>
           </el-image>
+
+          <video v-if="accept.indexOf('video') > -1"
+                 :src="
+                 getShowValue(f)"
+                 controls></video>
           <div class="lw-upload__img-actions"
                v-if="!disabled">
             <span class="del"
@@ -54,24 +61,20 @@
               </el-icon>
               <h4 v-if="title">{{ title }}</h4>
             </div>
+            <div v-if="file?.percentage"
+                 :style="style"
+                 class="lw-upload__progress">
+              <el-progress :percentage="file.percentage"
+                           :text-inside="true"
+                           :stroke-width="16" />
+            </div>
           </div>
         </slot>
       </el-upload>
     </div>
 
-    <div v-if="file && file.status != 'success'"
-         class="lw-upload__uploading">
-      <div class="lw-upload__progress">
-        <el-progress :percentage="file.percentage"
-                     :text-inside="true"
-                     :stroke-width="16" />
-      </div>
-      <el-image class="image"
-                :src="file.tempFile"
-                fit="cover"></el-image>
-    </div>
-
-    <div v-if="tip" class="el-upload__tip">
+    <div v-if="tip"
+         class="el-upload__tip">
       {{tip}}
     </div>
   </div>
@@ -231,7 +234,6 @@ export default {
       }
     },
     before(file) {
-      console.log(file.type)
       const acceptIncludes = this.accept.replace(/\s/g, "").split(",").includes(file.type)
       if (!acceptIncludes) {
         this.$notify.warning({
@@ -261,7 +263,7 @@ export default {
       delete file.percentage
       delete file.raw
       delete file.response
-      delete file.status
+      // delete file.status
       delete file.uid
       var os = this.onSuccess(res, file)
       if (os != undefined && os == false) {
@@ -297,7 +299,7 @@ export default {
     },
     error(err) {
       this.$nextTick(() => {
-        this.clearFiles()
+        delete this.file.percentage
       })
       this.$notify.error({
         title: '上传文件未成功',
@@ -308,13 +310,13 @@ export default {
       let apiObj = this.apiObj || this.$api.auth.upload
       const data = new FormData();
       data.append(param.filename, param.file);
+      data.append('fileName', param.file.name);
       for (const key in param.data) {
         data.append(key, param.data[key]);
       }
       apiObj(data, {
         onUploadProgress: e => {
-          const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
-          param.onProgress({ percent: complete })
+          this.file.percentage = parseInt(((e.loaded / e.total) * 100) | 0, 10)
         }
       }).then(res => {
         var response = this.parseData(res);
@@ -331,7 +333,6 @@ export default {
     getShowValue(item) {
       if (this.multiple) {
         if (typeof this.returnFile == 'object') {
-          console.log(Object.keys(this.returnFile)[0])
           return item[this.returnFile[Object.keys(this.returnFile)[0]]]
         } else {
           return item
@@ -349,141 +350,151 @@ export default {
   border-color: var(--el-color-danger);
 }
 
-.lw-upload .el-upload--picture-card {
-  border-radius: 0;
-  height: 100%;
-}
-
-.lw-upload .uploader,
-.lw-upload:deep(.el-upload) {
+.lw-upload {
   width: 100%;
-  height: 100%;
-}
 
-.lw-upload__img {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  &.lw-upload-round {
+    border-radius: 50%;
+    overflow: hidden;
 
-.lw-upload__img .image {
-  width: 100%;
-  height: 100%;
-}
+    .el-upload--picture-card {
+      border-radius: 50%;
+    }
 
-.lw-upload__img-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
+    .lw-upload__img-actions {
+      top: auto;
+      left: 0;
+      right: 0;
+      bottom: 0;
 
-.lw-upload__img-actions span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  color: #fff;
-}
+      span {
+        width: 100%;
+      }
+    }
+  }
 
-.lw-upload__img-actions span i {
-  font-size: 12px;
-}
+  .el-upload--picture-card {
+    border-radius: 0;
+    height: 100%;
+    position: relative;
+  }
 
-.lw-upload__img-actions .del {
-  background: #f56c6c;
-}
+  .uploader,
+  :deep(.el-upload) {
+    width: 100%;
+    height: 100%;
+  }
 
-.lw-upload__img:hover .lw-upload__img-actions {
-  display: block;
-}
+  .file-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
-.lw-upload__img-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  background-color: var(--el-fill-color-lighter);
+    i {
+      font-size: 28px;
+    }
+
+    h4 {
+      font-size: 12px;
+      font-weight: normal;
+      color: #8c939d;
+      margin-top: 8px;
+    }
+  }
 }
 
-.lw-upload__uploading {
+.lw-upload__img {
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+
+  video {
+    background-color: #000;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 25px;
+      height: 25px;
+      cursor: pointer;
+      color: #fff;
+
+      i {
+        font-size: 12px;
+      }
+
+      &.del {
+        background: #f56c6c;
+      }
+    }
+
+    &:hover {
+      display: block;
+    }
+  }
+
+  &-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    background-color: var(--el-fill-color-lighter);
+  }
+
+  &-uploading .image {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .lw-upload__progress {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--el-overlay-color-lighter);
+  background-color: rgba(#000, 0.4);
+  backdrop-filter: blur(10px);
   z-index: 1;
   padding: 10px;
-}
 
-.lw-upload__progress .el-progress {
-  width: 100%;
-}
-
-.lw-upload__uploading .image {
-  width: 100%;
-  height: 100%;
+  .el-progress {
+    width: 100%;
+  }
 }
 
-.lw-upload .file-empty {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.lw-upload {
-  width: 100%;
-}
 .view-img-list {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
-  // margin-bottom: 10px;
-}
-
-.lw-upload .file-empty i {
-  font-size: 28px;
-}
-
-.lw-upload .file-empty h4 {
-  font-size: 12px;
-  font-weight: normal;
-  color: #8c939d;
-  margin-top: 8px;
-}
-
-.lw-upload.lw-upload-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.lw-upload.lw-upload-round .el-upload--picture-card {
-  border-radius: 50%;
-}
-
-.lw-upload.lw-upload-round .lw-upload__img-actions {
-  top: auto;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.lw-upload.lw-upload-round .lw-upload__img-actions span {
-  width: 100%;
 }
 </style>
+