图片识别添加取消按钮

src/api/index.js

@@ -694,11 +694,12 @@ export function addPhotov(data) {
   });
 }
 // 拜访
-export function addstorePhoto(data) {
+export function addstorePhoto(data, signal) {
   return request({
     url: '/mobile/storeGroup/addPhoto',
     method: 'post',
     data: data,
+    signal: signal,
   });
 }
 export function buryingPoint(data) {

src/components/uploadVNormal.vue

@@ -11,7 +11,7 @@
         :show-text="true"
         :width="110"
         :format="format"></el-progress>
-      <!-- <div class="progressClose" @progressClose="progressClose">取消</div> -->
+      <div class="progressClose" @progressClose="progressClose">取消</div>
     </div>
     <imageAIVerifyErr
       v-if="imageAIVerifyFlag"
@@ -117,6 +117,7 @@ export default {
       imageAIVerifyData: null, //图匠校验返回的数据
       meidaId: '', //当前上传图片id
       addressesRemark: '', //当前位置信息
+      controller: null, //取消请求状态
     };
   },
   methods: {
@@ -261,14 +262,16 @@ export default {
         deviceCode: that.deviceCode, //设备编号
         putInCode: that.putInCode, //投放编号
       };
+      this.controller = null;
       // 需要图匠校验的添加参数和loading
       if (this.photoIdentifyType) {
         form.photoIdentifyType = this.photoIdentifyType;
         this.progress();
+        this.controller = null; //取消请求
       } else {
         this.toastLoading(0, '上传中...', true);
       }
-      addstorePhoto(form)
+      addstorePhoto(form, this.controller)
         .then((res) => {
           this.toastLoading().clear();
           if (res.code == -1) {
@@ -290,7 +293,12 @@ export default {
             that.$toast('上传失败！');
           }
         })
-        .catch(() => {
+        .catch((error) => {
+          if (error.name === 'AbortError') {
+            console.log('请求被取消:', error.message);
+          } else {
+            console.error('请求失败:', error);
+          }
           this.resetProgress();
         });
     },
@@ -370,7 +378,9 @@ export default {
         });
     },
     // 取消图片上传
-    progressClose() {},
+    progressClose() {
+      this.controller.abort();
+    },
   },
 };
 </script>
@@ -415,8 +425,10 @@ export default {
     justify-content: center;
     align-items: center;
     z-index: 99999999;
+    display: flex;
+    flex-direction: column;
     .progressClose {
-      width: 60px;
+      width: 70px;
       text-align: center;
       background: #67c23a;
       color: #fff;