修复微信浏览器中上传音频问题

src/hooks/common.js

@@ -12,4 +12,11 @@ export function useUserInfo(){
     let userInfo=ref(null)
     userInfo.value=localStorage.getItem('userInfo')?JSON.parse(Base64.decode(localStorage.getItem('userInfo'))):null
     return userInfo
+}
+
+// 是否为微信浏览器
+export function isWeiXin(){
+    const ua = navigator.userAgent.toLowerCase();
+    const flag = ua.indexOf('micromessenger') != -1;
+    return flag
 }

src/hooks/useUploadFileToOSS.js

@@ -55,7 +55,7 @@ export async function useUploadFileToOSS(data,fileName,isMultipart=false){
             resUrl='https://hzstatic.hzinsights.com/'+res.name
         }
     } catch (error) {
-        console.log(error);
+        console.log('阿里云上传失败',error);
     }
     
 

src/views/report/chapter/Detail.vue

@@ -8,7 +8,7 @@ import AudioBox from '../components/AudioBox.vue'
 import ReportInsertContent from '../components/reportInsert/Index.vue'
 import moment from 'moment'
 import {useInitFroalaEditor} from '@/hooks/useFroalaEditor'
-import {useUserInfo} from '@/hooks/common'
+import {useUserInfo,isWeiXin} from '@/hooks/common'
 import { showToast,showDialog } from 'vant'
 import {useUploadFileToOSS} from '@/hooks/useUploadFileToOSS'
 import MD5 from 'js-md5'
@@ -193,13 +193,17 @@ function handleShowUploadAudio(){
 // 获取音频时长
 function handleGetAudioDuration(file){
     return new Promise((resolve,reject)=>{
+        if(isWeiXin){
+            resolve(0)
+        }
+
         const fileUrl=URL.createObjectURL(file)
         const audioEl=new Audio(fileUrl)
         audioEl.addEventListener('loadedmetadata',(e)=>{
-            // console.log('e.path',e.path)
-            // console.log('e.composedPath',e.composedPath())
-            // console.log('获取音频时长',e.composedPath()[0].duration);
-            // console.log(audioEl.duration);
+            console.log('e.path',e.path)
+            console.log('e.composedPath',e.composedPath())
+            console.log('获取音频时长',e.composedPath()[0].duration);
+            console.log(audioEl.duration);
             const t=e.composedPath()[0].duration
             resolve(t)
         })
@@ -482,10 +486,11 @@ async function handleReportOpt(type){
         :style="{height:'60%'}"
     >
         <div class="upload-audio-wrap" v-if="showUploadAudio">
+            <div style="font-size:12px;color:#666">tips:如果是在微信内访问请上传完音频点击播放获取音频时长后方可保存</div>
             <template v-if="temAudioData.url">
                 <h2>音频链接</h2>
                 <p>{{temAudioData.url}}</p>
-                <AudioBox :url="temAudioData.url" />
+                <AudioBox :url="temAudioData.url" @updateDuration="e=>temAudioData.time=e"/>
             </template>
             <div class="bot-btns">
                 <van-uploader 
@@ -495,7 +500,7 @@ async function handleReportOpt(type){
                 >
                     <van-button class="bot-btn" type="default">{{temAudioData.url?'重新上传':'上传音频'}}</van-button>
                 </van-uploader>
-                <van-button class="bot-btn" type="primary" :disabled="!temAudioData.url" @click="handleUpdateAudio">保存</van-button>
+                <van-button class="bot-btn" type="primary" :disabled="!temAudioData.url||!temAudioData.time" @click="handleUpdateAudio">保存</van-button>
             </div>
         </div>
     </van-popup>

src/views/report/components/AudioBox.vue

@@ -7,6 +7,8 @@ const props=defineProps({
     }
 })
 
+const emits=defineEmits(['updateDuration'])
+
 watch(
     ()=>props.url,
     ()=>{
@@ -37,6 +39,7 @@ const duration=ref(0)//audio时长
 
 function audioCanplay(e){
     duration.value=e.target.duration
+    emits('updateDuration',duration.value)
 }
 
 function audioPlay(){