todo uploader

src/components/ShipInfo.vue

@@ -269,7 +269,7 @@ function uploadSuccess({ response, file, list }, index) {
     });
   }
 }
-async function removeSuccess({ file, list }, index) {
+async function removeSuccess({ file, fileIndex }, index) {
   if (props.shipInfos[currentIndex.value].code) {
     let { data } = await api.deleteShipCert({ shipCertId: file.id });
     if (data.status == 0) {

src/components/Uploader.vue

@@ -1,5 +1,58 @@
 <template>
-  <div>
+  <div class="df aic">
+    <div
+      class="df aic mr20"
+      style="position: relative"
+      v-for="(item, index) in fileList"
+      :key="item.type"
+      @mouseover="item.hover = true"
+      @mouseleave="item.hover = false"
+    >
+      <div
+        v-if="!disabled"
+        class="delete-box pointer"
+        @click="remove(item, index)"
+      >
+        <div class="delete"></div>
+      </div>
+      <div
+        class="file pointer"
+        v-if="
+          item.fileKey?.indexOf('.pdf') != -1 ||
+          item.fileKey?.indexOf('.PDF') != -1
+        "
+      >
+        <div v-show="item.hover" class="mask df aic jcsa">
+          <div
+            v-show="
+              item.fileKey?.indexOf('.pdf') != -1 ||
+              item.fileKey?.indexOf('.PDF') != -1
+            "
+            @click="previewPdf(item.viewUrl)"
+          >
+            查看
+          </div>
+        </div>
+        <iframe
+          style="
+            width: 150px;
+            overflow: hidden;
+            overflow: hidden;
+            height: 150px;
+          "
+          :src="item.viewUrl"
+          frameborder="0"
+          scrolling="no"
+        ></iframe>
+      </div>
+      <el-image
+        v-else
+        class="file"
+        fit="contain"
+        :src="item.viewUrl"
+        :preview-src-list="[item.viewUrl]"
+      ></el-image>
+    </div>
     <el-upload
       :class="{ hide: disabled || fileList.length == limit }"
       :id="uploaderId"
@@ -7,15 +60,10 @@
       multiple
       :action="actionUrl"
       list-type="picture-card"
-      :on-preview="preview"
-      :before-remove="deleteComfirm"
-      :on-remove="remove"
+      :show-file-list="false"
       :data="params"
       :on-success="uploadSuccess"
-      :file-list="fileList"
       :disabled="disabled"
-      :on-exceed="onExceed"
-      :limit="limit"
     >
       <div :class="['upload-plus-icon']">+</div>
       <div :class="['upload-text']">{{ uploadText }}</div>
@@ -62,33 +110,22 @@ function preview(file) {
   dialogImageUrl.value = file.url;
 }
 
-function deleteComfirm() {
-  return new Promise((resolve, reject) => {
-    ElMessageBox.confirm("确认删除?", "提示", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
+function remove(file, fileIndex) {
+  ElMessageBox.confirm("确认删除?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      emit("onRemoveFileList", { file, fileIndex });
     })
-      .then(() => {
-        resolve(true);
-      })
-      .catch(() => {
-        reject;
-      });
-  });
-}
-
-function remove(file, list) {
-  emit("onRemoveFileList", { file, list });
+    .catch(() => {});
 }
 function uploadSuccess(response, file, list) {
   emit("onUploadFileList", { response, file, list });
 }
-function onExceed(files, fileList) {
-  ElMessage({
-    message: `超出文件数量限制 (最大数量:${props.limit})`,
-    type: "warning",
-  });
+function previewPdf(url) {
+  window.open(url);
 }
 onMounted(() => {});
 </script>
@@ -116,4 +153,40 @@ onMounted(() => {});
 .hide:deep() .el-upload--picture-card {
   display: none !important;
 }
+
+.file {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  color: #fff;
+  border: 2px solid #eee !important;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  width: 150px;
+  height: 150px;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+  color: #fff;
+}
+
+.delete-box {
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  z-index: 20;
+  background: #fff;
+  border-radius: 50%;
+}
+.delete {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-image: url(https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/delete.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
 </style>