以图搜图优化

src/views/searchPic/index.vue

@@ -19,21 +19,34 @@
           class="upload-area"
           name="zipFile"
           accept=".jpg,.png"
-          :action="importZipUrl"
-          :headers="headers"
+          action
+          :before-upload="handleBeforeUpload"
+          :show-file-list="false"
           :on-success="handleSuccess"
-          :on-change="handleChange"
-          :auto-upload="false"
+          :on-progress="handleProgress"
+          :file-list="fileList"
           drag
         >
-          <div class="icon">
-            <svg-icon icon-class="img"></svg-icon>
+          <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="text">
-            <em>拖拽图片</em> 到这里或 <em>点击这里</em> 上传图片
-          </div>
-          <div class="camera">
-            <svg-icon icon-class="camera"></svg-icon>
+          <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>
@@ -44,10 +57,60 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      // progressText: "", //进度文字
+      progressPercent: 0, //进度百分比
+      showProgress: false, //是否展示进度条
+      fileList: [], //双向绑定的文件，上传完之后会被清空
+      showFileList: [], //展示的文件列表,上传之后不会被清空
+    };
   },
   mounted() {},
-  methods: {},
+  methods: {
+    // 上传前钩子，处理文件类型
+    async handleBeforeUpload(file) {
+      // debugger;
+      let reg = /(?<=\.)[a-z]+$/g;
+      let fileType = file.name.match(reg) + "";
+      let typeArr = ["png", "jpg", "jpeg"];
+      if (!typeArr.includes(fileType)) {
+        this.$message.warning("上传文件格式错误!");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file);
+      this.showProgress = true;
+      // TODO:上传接口调用
+      // await realtimeUpload(formData, this).then((res) => {
+      //   if (res.code == "0") {
+      //     this.$message.success(res.data);
+      //   } else {
+      //     this.$message.warning(res.data);
+      //   }
+      // });
+      setTimeout(() => {
+        this.showProgress = false;
+        // this.rotateFn(0)
+        this.progressPercent = 0;
+      }, 1000);
+    },
+    // 文件上传进度钩子，展示文件进度
+    handleProgress(event) {
+      console.log(event);
+      this.showProgress = true;
+      this.progressPercent = parseInt(event.percent);
+    },
+    // 上传成功之后的钩子
+    handleSuccess(res) {
+      console.log(res);
+      if (res.code == 200) {
+        this.progressPercent = 100;
+      } else {
+        console.log("上传失败");
+      }
+      this.showProgress = false;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -108,7 +171,7 @@ export default {
   }
 }
 .upload-wrapper {
-  height: 400px;
+  height: 300px;
   width: 100%;
   display: flex;
   justify-content: center;
@@ -164,38 +227,9 @@ export default {
     }
   }
 }
-
-.show-result {
-  .banner {
-    .subtitle {
-      opacity: 0;
-    }
-  }
-  .upload-wrapper {
-    height: 90px;
-    .upload-panel {
-      height: 80px;
-      transform: translateY(-200px);
-    }
-  }
-  ::v-deep .el-upload-dragger {
-    align-items: flex-start !important;
-    padding: 0 10px;
-    position: relative;
-    .icon {
-      opacity: 0;
-    }
-    .text {
-      transform: translateY(-28px);
-    }
-    .camera {
-      color: $deepBlue;
-      opacity: 1;
-      position: absolute;
-      right: 0;
-      top: 0;
-      font-size: 20px;
-    }
-  }
+.img-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>