添加图片预览

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -46,10 +46,33 @@
             round
             type="primary"
             @click="onDownload(uploadUrlItem)"
-            v-if="checkFileSuffix(uploadUrlItem.url)"
+            v-if="
+              checkFileSuffix(uploadUrlItem.url) &&
+              !isCheckImage(uploadUrlItem.url)
+            "
             size="mini"
             >预览</el-button
           >
+          <div
+            v-if="isCheckImage(uploadUrlItem.url)"
+            style="display: inline-flex; position: relative"
+          >
+            <el-button
+              style="position: absolute; left: 0; top: 0"
+              round
+              type="primary"
+              @click="onDownload(uploadUrlItem)"
+              v-if="checkFileSuffix(uploadUrlItem.url)"
+              size="mini"
+              >预览</el-button
+            >
+            <el-image
+              style="width: 56px; height: 28px; opacity: 0"
+              :src="uploadUrlItem.url"
+              :preview-src-list="[uploadUrlItem.url]"
+            >
+            </el-image>
+          </div>
           <!-- <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name || uploadUrlItem.url }}</a> -->
         </div>
       </template>
@@ -631,6 +654,13 @@ export default {
     }
   },
   methods: {
+    isCheckImage(file) {
+      const urlArr = file.split(".");
+      const suffix = urlArr[urlArr.length - 1];
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      console.log(imgSuffix.includes(suffix), "11");
+      return imgSuffix.includes(suffix);
+    },
     // 获取学校列表
     onDownload(item, type) {
       if (type == "download") {
@@ -640,7 +670,9 @@ export default {
 
       let urlArr = item.url.split(".");
       let suffix = urlArr[urlArr.length - 1];
-      if (suffix != "pdf") {
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      if (imgSuffix.includes(suffix)) {
+      } else if (suffix != "pdf") {
         this.previewUrl =
           "https://view.officeapps.live.com/op/view.aspx?src=" + item.url;
         window.open(this.previewUrl);
@@ -724,13 +756,17 @@ export default {
     checkFileSuffix(url) {
       let urlArr = url.split(".");
       let suffix = urlArr[urlArr.length - 1];
-      if (
-        suffix == "xlsx" ||
-        suffix == "xls" ||
-        suffix == "doc" ||
-        suffix == "docx" ||
-        suffix == "pdf"
-      ) {
+      const passSuffix = [
+        "xlsx",
+        "xls",
+        "pdf",
+        "png",
+        "jpg",
+        "jpeg",
+        "gif",
+        "ico",
+      ];
+      if (passSuffix.includes(suffix)) {
         return true;
       } else {
         return false;

src/views/process/list/handle.vue

@@ -233,14 +233,49 @@
                       @click="onDownload(uploadUrlItem, 'download')"
                       >下载</el-button
                     >
-                    <el-button
+                    <!-- <el-button
                       round
                       type="primary"
                       @click="onDownload(uploadUrlItem)"
                       v-if="checkFileSuffix(uploadUrlItem.url)"
                       size="mini"
                       >预览</el-button
+                    > -->
+                    <el-button
+                      round
+                      type="primary"
+                      @click="onDownload(uploadUrlItem)"
+                      v-if="
+                        checkFileSuffix(uploadUrlItem.url) &&
+                        !isCheckImage(uploadUrlItem.url)
+                      "
+                      size="mini"
+                      >预览</el-button
                     >
+                    <div
+                      v-if="isCheckImage(uploadUrlItem.url)"
+                      style="
+                        display: inline-flex;
+                        position: relative;
+                        margin-left: 10px;
+                      "
+                    >
+                      <el-button
+                        style="position: absolute; left: 0; top: 0"
+                        round
+                        type="primary"
+                        @click="onDownload(uploadUrlItem)"
+                        v-if="checkFileSuffix(uploadUrlItem.url)"
+                        size="mini"
+                        >预览</el-button
+                      >
+                      <el-image
+                        style="width: 56px; height: 28px; opacity: 0"
+                        :src="uploadUrlItem.url"
+                        :preview-src-list="[uploadUrlItem.url]"
+                      >
+                      </el-image>
+                    </div>
                   </div>
                 </div>
               </template>
@@ -431,7 +466,9 @@ export default {
 
       let urlArr = item.url.split(".");
       let suffix = urlArr[urlArr.length - 1];
-      if (suffix != "pdf") {
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      if (imgSuffix.includes(suffix)) {
+      } else if (suffix != "pdf") {
         this.previewUrl =
           "https://view.officeapps.live.com/op/view.aspx?src=" + item.url;
         window.open(this.previewUrl);
@@ -462,16 +499,27 @@ export default {
       }
       return returnUrl;
     },
+    isCheckImage(file) {
+      const urlArr = file.split(".");
+      const suffix = urlArr[urlArr.length - 1];
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      console.log(imgSuffix.includes(suffix), "11");
+      return imgSuffix.includes(suffix);
+    },
     checkFileSuffix(url) {
       let urlArr = url.split(".");
       let suffix = urlArr[urlArr.length - 1];
-      if (
-        suffix == "xlsx" ||
-        suffix == "xls" ||
-        suffix == "doc" ||
-        suffix == "docx" ||
-        suffix == "pdf"
-      ) {
+      const passSuffix = [
+        "xlsx",
+        "xls",
+        "pdf",
+        "png",
+        "jpg",
+        "jpeg",
+        "gif",
+        "ico",
+      ];
+      if (passSuffix.includes(suffix)) {
         return true;
       } else {
         return false;
@@ -1100,6 +1148,8 @@ export default {
 }
 
 .fileUploader {
+  display: flex;
+  align-items: center;
   margin-top: 8px;
   background: #f5f5f5;
   padding: 6px;