فهرست منبع

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

zhujindu 8 ماه پیش
والد
کامیت
79a0e4e8ed
3فایلهای تغییر یافته به همراه49 افزوده شده و 12 حذف شده
  1. 10 0
      src/api/H5Camera.js
  2. 19 10
      src/utils/uploadAliOss.js
  3. 20 2
      src/views/home/index.vue

+ 10 - 0
src/api/H5Camera.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 获取阿里云oss STS token
+export function getSTSToken(query) {
+  return request({
+    url: '/mobile/getSTSToken',
+    method: 'get',
+    params: query,
+  });
+}

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 19 - 10
src/utils/uploadAliOss.js


+ 20 - 2
src/views/home/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="homePage" ref="homePage">
     <div class="content">
-      <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft" />
+      <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft">
+        <template #right>
+          <!-- 原生自带拍照 -->
+          <H5Camera @getImg="getImg" />
+        </template>
+      </van-nav-bar>
       <van-tabs
         class="myTab"
         type="card"
@@ -45,9 +50,11 @@ 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 },
+  components: { tabBar, hintTabPage, ABtarget, bottomBtn, H5Camera },
   computed: {
     ...mapState({
       userInfo: (state) => state.user.userInfo,
@@ -88,6 +95,17 @@ 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;