uniapp 安卓/ios 录音授权,录制音频,录音文件上传_uniapp 获取录音权限

下载依赖插件

官方的app端要权插件:App权限判断和提示
第三方录音组件:录音播放-语音录制voice-sound-recording

引入依赖

import permision from "@/js_sdk/wa-permission/permission.js"
import soundRecording from '@/components/sound-recording/sound-recording.vue'
1
2

组件声明

  components: {
    soundRecording,
  },
1
2
3

组件使用

    //组件 show为控制是否显示。
    <u-button @click="record" type="primary">录制音频'</u-button>
    <view class="popup-bottom" v-if="show">
      <view class="popup-bg" @click="show = false"></view>
      <view class="popup-content">
        <sound-recording
            :maximum="60"
            @cancel="show = false"
            @confirm="onUpload">
        </sound-recording>
      </view>
    </view>
    
   // 组件样式
    .popup-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;

    .popup-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .popup-content {
      height: 40%;
      margin-top: auto;
      background-color: #fff;
      position: relative;
      z-index: 11;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

录音权限

    async record() {
      let env = uni.getSystemInfoSync().platform
      if (env === 'android') {
        permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then((e)=>{
          if(e===-1){
            uni.showToast({
              title:'您已经永久拒绝录音权限，请在应用设置中手动打开',
              icon:'none',
            })
          }
          else if(e===0){
            uni.showToast({
              title:'您拒绝了录音授权',
              icon:'none',
            })
          }
          else if(e===1){
            this.show=true
          }
          else {
            uni.showToast({
              title:'授权返回值错误',
              icon:'none',
            })
          }
        }).catch((err)=>{
          uni.showToast({
            title:'拉起录音授权失败',
            icon:'none',
          })
        })
      } else if (env === 'ios') {
        if(permision.judgeIosPermission("record"))
          this.show=true
        else
          uni.showToast({
            title:'您拒绝了录音授权，请在应用设置中手动打开',
            icon:'none',
          })
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

录音文件上传

 //音频上传
    onUpload(tempFilePath) {
      uni.showLoading();
      uni.uploadFile({
        url: host + apiUrl.UploadController.upload,
        filePath: tempFilePath, //录音结束后返回的临时路径
        name: 'file', // 文件对应的 key值对象名称
        header: {
          'content-type': 'multipart/form-data',
          'Authorization': uni.getStorageSync('Authorization') //token信息
        },
        success: (res) => {
          const result=JSON.parse(res.data)
          console.log('result',result)
        },
        fail: (res) => {
          uni.showToast({
            title:'失败',
            icon:'none',
          })
        }
      })

    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24