Browse Source

Merge branch 'feature_20250310_使用原生手机拍照,优化企业微信拍照模糊问题' into uat(dev)

# Conflicts:
#	src/views/home/index.vue
zhujindu 8 months ago
parent
commit
3060ce7c5a

+ 10 - 0
src/api/H5Camera.js

@@ -8,3 +8,13 @@ export function getSTSToken(query) {
     params: query,
   });
 }
+
+// 上传阿里云图片地址
+export function addH5Photo(data, signal) {
+  return request({
+    url: '/mobile/storeGroup/addH5Photo',
+    method: 'post',
+    data,
+    signal: signal,
+  });
+}

+ 8 - 1
src/components/H5Camera.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="h5Camera">
     <van-icon class="photo photos" name="photograph" size="22px" color="#969696" @click="camera" />
-    <input type="file" accept="image/*" capture="camera" id="h5Camera" />
+    <input type="file" accept="image/*" :capture="capture" id="h5Camera" />
   </div>
 </template>
 <script>
 export default {
   name: 'H5Camera',
+  props: {
+    capture: {
+      // 摄像头类型 camera:照相机;camcorder:摄像机;microphone:录音
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       imgUrl: '',

+ 91 - 27
src/components/uploadVNormal.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="questionNamep">
+    <!-- 0=企业微信,1=H5相机 -->
     <!-- 企业微信拍照 -->
-    <div class="cameraDiv" @click="uploadImg">
+    <div class="cameraDiv" @click="uploadImg" v-if="userInfo.photoMethod == '0'">
       <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
     </div>
     <!-- 原生自带拍照 -->
-    <!-- <H5Camera @getImg="getImg" /> -->
+    <H5Camera @getImg="getImg" :capture="pictureSource == '1' ? '' : 'camera'" v-else />
     <div id="allmap"></div>
     <div class="mask" v-if="progressFlag">
       <el-progress
@@ -34,6 +35,8 @@ import imageAIVerifyErr from './imageAIVerifyErr';
 import H5Camera from '@/components/H5Camera';
 import axios from 'axios';
 import uploadAliOss from '@/utils/uploadAliOss';
+import { addH5Photo } from '@/api/H5Camera';
+import { mapState } from 'vuex';
 
 export default {
   name: 'uploadImg',
@@ -116,6 +119,11 @@ export default {
       default: '',
     },
   },
+  computed: {
+    ...mapState({
+      userInfo: (state) => state.user.userInfo,
+    }),
+  },
   data() {
     return {
       shows: false,
@@ -134,7 +142,55 @@ export default {
     // 原生H5拍照图片
     // url: base64
     getImg(base64) {
-      uploadAliOss(base64, '测试111');
+      if (this.objectType == '' || this.objectType == null) {
+        this.$toast('请选择类型!');
+        return;
+      }
+      // 图片名称:用户名-时间戳
+      let username = localStorage.getItem('loginName');
+      let imgName = username + '-' + new Date().getTime();
+      uploadAliOss(base64, imgName)
+        .then((res) => {
+          if (res.url && res.url.indexOf('http') != -1) {
+            var form = {
+              fileUrl: res.url,
+              collectionItemId: this.collectionId,
+              objectType: this.objectType,
+              storeGroupId: this.storeGroupId,
+              taskId: this.taskId,
+              visitsId: localStorage.getItem('visitId'),
+              visitModel: this.visitModel,
+              visitSource: '1',
+              locationRemark: '',
+              parentCollectionId: this.parentCollectionId || '',
+              secondCollectionId: this.secondCollectionId || '',
+              firstCollectionId: this.firstCollectionId || '',
+              fourthCollectionId: this.fourthCollectionId || '',
+              thirdCollectionId: this.thirdCollectionId || '',
+              deviceCode: this.deviceCode, //设备编号
+              putInCode: this.putInCode, //投放编号
+            };
+            this.controller = null;
+            // 需要图匠校验的添加参数和loading
+            if (this.photoIdentifyType) {
+              form.photoIdentifyType = this.photoIdentifyType;
+              this.progress();
+              this.controller = new AbortController(); //取消请求
+            } else {
+              this.toastLoading(0, '上传中...', true);
+            }
+            addH5Photo(form, this.controller ? this.controller.signal : null)
+              .then((res) => {
+                this.requestThen(res);
+              })
+              .catch((error) => {
+                this.requestCatch(error);
+              });
+          }
+        })
+        .catch((err) => {
+          console.log('err:' + err);
+        });
     },
     uploadImg() {
       var map = new TMap.Map('allmap', {
@@ -290,34 +346,42 @@ export default {
       }
       addstorePhoto(form, this.controller ? this.controller.signal : null)
         .then((res) => {
-          this.toastLoading().clear();
-          if (res.code == -1) {
-            // 图匠图片校验接口超时
-            this.requestTimeOut(res);
-          } else if (res.code == 200) {
-            // 图匠校验结果返回
-            if (this.photoIdentifyType) {
-              // 重置loaidng状态
-              this.resetProgress();
-              this.imageAIVerifyFlag = true;
-              this.imageAIVerifyData = res.data;
-            } else {
-              // 正常流程
-              this.normalFlow(res);
-            }
-          } else {
-            this.resetProgress();
-            that.$toast('上传失败!');
-          }
+          this.requestThen(res);
         })
         .catch((error) => {
-          if (error.message === 'canceled') {
-            this.$toast('取消上传');
-            console.log('请求被取消:', error.message);
-          }
-          this.resetProgress();
+          this.requestCatch(error);
         });
     },
+    // 公用请求then
+    requestThen(res) {
+      this.toastLoading().clear();
+      if (res.code == -1) {
+        // 图匠图片校验接口超时
+        this.requestTimeOut(res);
+      } else if (res.code == 200) {
+        // 图匠校验结果返回
+        if (this.photoIdentifyType) {
+          // 重置loaidng状态
+          this.resetProgress();
+          this.imageAIVerifyFlag = true;
+          this.imageAIVerifyData = res.data;
+        } else {
+          // 正常流程
+          this.normalFlow(res);
+        }
+      } else {
+        this.resetProgress();
+        that.$toast('上传失败!');
+      }
+    },
+    // 公用请求catch
+    requestCatch(error) {
+      if (error.message === 'canceled') {
+        this.$toast('取消上传');
+        console.log('请求被取消:', error.message);
+      }
+      this.resetProgress();
+    },
     // 正常流程
     normalFlow(res) {
       this.$toast('上传成功!');

+ 27 - 4
src/utils/uploadAliOss.js

@@ -47,21 +47,44 @@ async function uploadAliOss(base64, filename) {
   }
   const client = new OSS({
     region: 'cn-shanghai',
-    // yourBucketName填写Bucket名称。
     bucket: 'svs-test',
     accessKeyId: credentials.accessKeyId,
     accessKeySecret: credentials.accessKeySecret,
     stsToken: credentials.securityToken,
     secure: true,
+    // 显式指定endpoint并修正格式
+    // 使用标准区域节点配置
+    region: 'oss-cn-shanghai',
+    // 添加网络优化参数
+    timeout: 30000,
+    retryMax: 3,
+    // 修正headers配置
+    headers: {
+      'x-oss-forbid-overwrite': 'true',
+      'Cache-Control': 'no-cache',
+    },
   });
   let file = dataURLtoFile(base64, filename);
+
+  const regex = /^data:image\/(\w+);base64,/; // 正则表达式匹配base64数据头部
+  const matches = base64.match(regex);
+  let fileName = filename;
+  if (matches && matches.length === 2) {
+    matches[1]; // 返回第一个捕获组,即文件扩展名
+    fileName = filename + '.' + matches[1];
+  }
   try {
-    const result = await client.put(filename, file, { headers });
+    const result = await client.put(fileName, file);
     console.log(result);
     return result;
   } catch (e) {
-    console.log(e);
-    throw new Error(e);
+    console.error('OSS Upload Error Details:', {
+      code: e.code,
+      message: e.message,
+      requestId: e.requestId,
+      hostId: e.hostId,
+    });
+    throw new Error(`文件上传失败: ${e.code} - ${e.message}`);
   }
 }
 /**

+ 1 - 18
src/views/home/index.vue

@@ -2,10 +2,6 @@
   <div class="homePage" ref="homePage">
     <div class="content">
       <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft">
-        <template #right>
-          <!-- 原生自带拍照 -->
-          <H5Camera @getImg="getImg" />
-        </template>
       </van-nav-bar>
       <van-tabs
         class="myTab"
@@ -51,11 +47,9 @@ import ABtarget from './ABtarget.vue';
 import { mapState } from 'vuex';
 import bottomBtn from './bottomBtn.vue';
 import { getTicketFun } from '@/utils/TXApiFun';
-import uploadAliOss from '@/utils/uploadAliOss';
-import H5Camera from '@/components/H5Camera';
 export default {
   name: 'home',
-  components: { tabBar, hintTabPage, ABtarget, bottomBtn, H5Camera },
+  components: { tabBar, hintTabPage, ABtarget, bottomBtn },
   computed: {
     ...mapState({
       userInfo: (state) => state.user.userInfo,
@@ -129,17 +123,6 @@ export default {
     });
   },
   methods: {
-    // 原生H5拍照图片
-    // url: base64
-    getImg(base64) {
-      uploadAliOss(base64, '测试111')
-        .then((res) => {
-          console.log('res:' + res);
-        })
-        .catch((err) => {
-          console.log('err:' + err);
-        });
-    },
     onRefresh() {
       this.getDict(true);
       this.isLoading = false;

+ 1 - 0
src/views/week/systemSettings.vue

@@ -30,6 +30,7 @@ export default {
     };
   },
   created() {
+    // 0=企业微信,1=H5相机
     this.switchChecked = this.userInfo.photoMethod == 0 ? false : true;
   },
   methods: {