Browse Source

使用原生手机拍照,优化企业微信拍照模糊问题

zhujindu 8 months ago
parent
commit
75beeb532a
3 changed files with 28 additions and 24 deletions
  1. 8 2
      src/components/uploadVNormal.vue
  2. 19 4
      src/utils/uploadAliOss.js
  3. 1 18
      src/views/home/index.vue

+ 8 - 2
src/components/uploadVNormal.vue

@@ -5,7 +5,7 @@
       <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
     </div>
     <!-- 原生自带拍照 -->
-    <!-- <H5Camera @getImg="getImg" /> -->
+    <H5Camera @getImg="getImg" />
     <div id="allmap"></div>
     <div class="mask" v-if="progressFlag">
       <el-progress
@@ -134,7 +134,13 @@ export default {
     // 原生H5拍照图片
     // url: base64
     getImg(base64) {
-      uploadAliOss(base64, '测试111');
+      uploadAliOss(base64, '测试111')
+        .then((res) => {
+          console.log('res:' + res);
+        })
+        .catch((err) => {
+          console.log('err:' + err);
+        });
     },
     uploadImg() {
       var map = new TMap.Map('allmap', {

+ 19 - 4
src/utils/uploadAliOss.js

@@ -47,21 +47,36 @@ 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);
   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"
@@ -50,11 +46,9 @@ import tabBar from '@/components/tabBar';
 import ABtarget from './ABtarget.vue';
 import { mapState } from 'vuex';
 import bottomBtn from './bottomBtn.vue';
-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,
@@ -95,17 +89,6 @@ export default {
   },
   mounted() {},
   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;