完善以图搜图前端界面和上传逻辑

src/router/index.js

@@ -187,6 +187,13 @@ const routes = [
     name: "3d",
     component: () =>
       import("@/views/3d/index.vue"),
+  },
+   // 3d展示页面，仅供测试用
+   {
+    path: "/caj",
+    name: "caj",
+    component: () =>
+      import("@/views/caj/index.vue"),
   },
   // 404
   {

src/views/caj/urls.js

+
+// const baseUrl = process.env.VUE_APP_BASE_HOST
+const baseUrl = ''
+const folder = '/SoftWare'
+const urls = {
+    TXUOS_INTER:
+        "/TXUOS/inter/net.cnki.cajviewer_1.1.1-3_amd64.deb",
+    TXUOS_FT: "/TXUOS/FT/net.cnki.cajviewer_1.1.1-3_arm64.deb",
+    TXUOS_LX3A4000:
+        "/TXUOS/LX3A4000/net.cnki.cajviewer_1.1.1-3_mips64.deb",
+    TXUOS_LX3A5000:
+        "/TXUOS/LX3A5000/net.cnki.cajviewer_1.1.0-2_loongarch64.deb",
+    TXUOS_KMSRMJCY:
+        "/TXUOS/KMSRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb",
+    YHQL_INTER: "/YHQL/inter/cajviewer_1.1.1-3_amd64.deb",
+    YHQL_FT: "/YHQL/FT/cajviewer_1.1.1-3_arm64.deb",
+    YHQL_LX3A4000: "/YHQL/LX3A4000/cajviewer_1.1.1-3_mips64.deb",
+    YHQL_LX3A5000:
+        "/YHQL/LX3A5000/cajviewer_1.1.0-2_loongarch64.deb",
+    ZKFD_SERVER: "/ZKFD/Server/cajviewer-1.1.1-3.nfs4.x86_64.rpm",
+    ZKFD_CLIENT: "/ZKFD/Client/cajviewer_1.1.1-3_amd64.deb",
+    WINDOWS_64: "/Windows/64/CAJViewer 8.1_x64-setup.exe",
+    WINDOWS_32: "/Windows/32/CAJViewer8.0.1.1-setup.exe",
+    JDBF: "/JDBF/CAJViewer-x86_64-1.1.1.AppImage",
+}
+
+const fullUrl = addBaseUrl(urls)
+
+// 增加baseUrl
+function addBaseUrl() {
+    const newUrls = {}
+    for (const key in urls) {
+        newUrls[key] = baseUrl + folder + urls[key]
+    }
+    return newUrls
+}
+
+export default fullUrl
\ No newline at end of file

src/views/searchPic/components/imgList/index.vue

@@ -61,7 +61,7 @@ export default {
       //   }
     },
     handleClickImg(e){
-        console.log(e);
+      console.log(e);
     }
   },
 };

src/views/searchPic/index.vue

@@ -13,7 +13,7 @@
       <div class="right-pic"></div>
     </div>
     <div class="upload-wrapper">
-      <div class="upload-bar">
+      <div class="upload-bar" @click="handleClickUpload" v-loading="loading">
         <div class="left-area">
           <div class="text">点击这里 上传图片</div>
           <div class="camera">
@@ -22,53 +22,25 @@
         </div>
         <div class="right-button">以图搜图</div>
       </div>
-      <!-- <div class="upload-panel">
-        <el-upload
-          ref="upload"
-          class="upload-area"
-          name="zipFile"
-          accept=".jpg,.png"
-          action
-          :before-upload="handleBeforeUpload"
-          :show-file-list="false"
-          :on-success="handleSuccess"
-          :on-progress="handleProgress"
-          :file-list="fileList"
-          drag
-        >
-          <div v-if="showProgress">
-            <el-progress
-              id="progress"
-              type="circle"
-              :percentage="percent"
-              :stroke-width="8"
-              :width="100"
-              :show-text="true"
-            ></el-progress>
-          </div>
-          <div class="img-wrapper" v-else>
-            <div class="icon">
-              <svg-icon icon-class="img"></svg-icon>
-            </div>
-            <div class="text">
-              <em>拖拽图片</em> 到这里或 <em>点击这里</em> 上传图片
-            </div>
-            <div class="camera">
-              <svg-icon icon-class="camera"></svg-icon>
-            </div>
-          </div>
-        </el-upload>
-      </div> -->
+      <el-upload
+        v-show="false"
+        ref="uploader"
+        class="upload-area"
+        accept=".jpg,.png"
+        action
+        :before-upload="handleBeforeUpload"
+        :show-file-list="false"
+        :on-success="handleSuccess"
+      >
+        <el-button ref="uploadButton" class="upload-button">上传</el-button>
+      </el-upload>
     </div>
-    <div class="current-pic" v-if="showResult">
-      <div class="img-container">
-        <div class="close">
+    <div class="current-pic">
+      <div class="img-container" v-if="currentImg">
+        <div class="close" @click="handleCloseImg">
           <i class="el-icon-close"></i>
         </div>
-        <img
-          src="http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png"
-          alt=""
-        />
+        <img :src="currentImg" alt="" />
       </div>
     </div>
     <ImgList v-if="showResult" />
@@ -83,19 +55,14 @@ export default {
   },
   data() {
     return {
-      // progressText: "", //进度文字
-      progressPercent: 0, //进度百分比
-      showProgress: false, //是否展示进度条
-      fileList: [], //双向绑定的文件，上传完之后会被清空
-      showFileList: [], //展示的文件列表,上传之后不会被清空
-      showResult: true, //是否展示图片结果
+      showResult: false, //是否展示图片结果
+      currentImg: "", //当前搜索的图片
+      loading: false, //是否正在上传
     };
   },
-  mounted() {},
   methods: {
     // 上传前钩子，处理文件类型
     async handleBeforeUpload(file) {
-      // debugger;
       let reg = /(?<=\.)[a-z]+$/g;
       let fileType = file.name.match(reg) + "";
       let typeArr = ["png", "jpg", "jpeg"];
@@ -103,34 +70,35 @@ export default {
         this.$message.warning("上传文件格式错误!");
         return;
       }
+      // mock上传过程
+      this.loading = true;
       let formData = new FormData();
       formData.append("file", file);
-      this.showProgress = true;
-      // TODO:上传接口调用
+      this.$message.warning("上传名称：" + file.name);
+      // // TODO:上传接口调用
       setTimeout(() => {
-        this.showProgress = false;
-        this.progressPercent = 0;
-      }, 1000);
-    },
-    // 文件上传进度钩子，展示文件进度
-    handleProgress(event) {
-      console.log(event);
-      this.showProgress = true;
-      this.progressPercent = parseInt(event.percent);
+        this.currentImg =
+          "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png";
+        this.$message.success("已查询出10条件结果");
+        this.showResult = true;
+        this.loading = false;
+      }, 3000);
     },
     // 上传成功之后的钩子
     handleSuccess(res) {
-      console.log(res);
-      if (res.code == 200) {
-        this.progressPercent = 100;
-      } else {
-        console.log("上传失败");
-      }
-      this.showProgress = false;
+      this.loading = false;
     },
     // 关闭已上传的图片
     handleCloseImg() {
-      console.log("关闭");
+      this.currentImg = "";
+    },
+    // 点击上传
+    handleClickUpload() {
+      if (this.loading) {
+        this.$message.warning('当前有图片正在上传，请稍等~')
+        return
+      }
+      this.$refs.uploader.$el.querySelector(".upload-button").click();
     },
   },
 };
@@ -225,6 +193,7 @@ $transition-ease-03s: all ease 0.3s;
       justify-content: space-between;
       padding-right: 16px;
       width: 80%;
+      color: #ccc;
       i {
         font-size: 30px;
         color: $deep-blue;