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

src/components/H5Camera.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="h5Camera">
-    <input type="file" accept="image/*" capture="camera" />
+    <van-icon class="photo photos" name="photograph" size="22px" color="#969696" @click="camera" />
+    <input type="file" accept="image/*" capture="camera" id="h5Camera" />
   </div>
 </template>
 <script>
@@ -9,29 +10,33 @@ export default {
   data() {
     return {
       imgUrl: '',
+      input: null,
     };
   },
   mounted() {
-    var input = document.querySelector('input[type=file]');
-    input.addEventListener('change', function (e) {
-      var file = e.target.files[0];
-
-      var reader = new FileReader();
-
-      reader.onload = function (e) {
-        var dataURL = e.target.result;
-
+    this.input = document.getElementById('h5Camera');
+    this.input.addEventListener('change', (e) => {
+      let file = e.target.files[0];
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        let dataURL = e.target.result;
+        // console.log(dataURL);
         // 在此处对 dataURL 进行操作，例如显示图片
       };
-
       reader.readAsDataURL(file);
     });
   },
+  methods: {
+    camera() {
+      if (this.input) this.input.click();
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .h5Camera {
-  width: 100%;
-  height: 100%;
+  #h5Camera {
+    display: none;
+  }
 }
 </style>

src/components/uploadVNormal.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="questionNamep">
-    <div class="cameraDiv" @click="uploadImg">
+    <!-- 企业微信拍照 -->
+    <!-- <div class="cameraDiv" @click="uploadImg">
       <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
-    </div>
+    </div> -->
+    <!-- 原生自带拍照 -->
+    <H5Camera />
     <div id="allmap"></div>
     <div class="mask" v-if="progressFlag">
       <el-progress
@@ -28,11 +31,12 @@
 <script>
 import { addstorePhoto, addVisitsPosition, addPhotoToDB } from '@/api/index';
 import imageAIVerifyErr from './imageAIVerifyErr';
+import H5Camera from '@/components/H5Camera';
 import axios from 'axios';
 
 export default {
   name: 'uploadImg',
-  components: { imageAIVerifyErr },
+  components: { imageAIVerifyErr, H5Camera },
   props: {
     uploadid: {
       type: String,

src/views/deviceOutside/index.vue

@@ -3,9 +3,6 @@
     <div class="navBarTOP">
       <!--        顶部条-->
       <van-nav-bar class="navBar" title="计划外">
-        <template #left>
-          <H5Camera />
-        </template>
         <template #right>
           <span @click="searchFn">筛选<van-icon name="arrow-down" /></span>
         </template>
@@ -537,10 +534,9 @@ import xmgj from '@/assets/xmgj.png';
 import { getOrderUrlByStoreId } from '@/api/inventory';
 import { checkStoreAddressByStoreCode } from '@/api/visitstore';
 import { getPosition, getMapPoi, getkeywordPoi, getTicketFun } from '@/utils/TXApiFun';
-import H5Camera from '@/components/H5Camera';
 export default {
   name: 'outsidelist',
-  components: { tabBar, mapmarker, H5Camera },
+  components: { tabBar, mapmarker },
   data() {
     return {
       yichang: yichang,