<template>
<view class="WH">
<u--form :model="formData" :rules="rules" ref="uForm" labelPosition="left" labelWidth="110px" class="width paddingL40 paddingLR32 bgWhite text-right-form">
<u-form-item label="录音:" borderBottom>
<view class="viaTion">
<view v-for="(item, index) in soundsList" :key="index" style="display: flex">
<text @click="playVoice(item)">
{{ item.fileName }}
</text>
<view class="icon_close" @click="soundClose(item, index)"> </view>
</view>
<nb-voice-record v-if="soundsList && soundsList.length < 9" @startRecord="start" @endRecord="end" @cancelRecord="cancel"></nb-voice-record>
</view>
</u-form-item>
</u--form>
</view>
</template>
<script>
export default {
data() {
return {
formData: {},
soundsList: [],
rules: {}
};
},
mounted() {},
methods: {
//播放录音
playVoice(item) {
let _this = this;
if (item.filePath) {
const failAudio = uni.createInnerAudioContext();
failAudio.src = this.$http.config.baseUrl + "/preview/" + item.filePath;
failAudio.play();
}
},
//删除录音
soundClose(item, index) {
this.soundsList.splice(index, 1);
},
// 开始录音
start() {},
// 结束录音并处理得到的录音文件
// event中,app端仅有tempFilePath字段,微信小程序还有duration和fileSize两个字段
end(event) {
this.sounds = event;
//发送录音:
return new Promise((resolve, reject) => {
let url = "";
// #ifdef APP-PLUS
url = this.$http.config.baseUrl + "/api/file/fileUpOne";
// #endif
// #ifdef H5
url = "/api/file/fileUpOne";
// #endif
let a = uni.uploadFile({
url: url,
filePath: event.tempFilePath,
name: "file",
formData: {
user: "test",
},
success: (res) => {
setTimeout(() => {
let a = JSON.parse(res.data);
this.soundsList.push(a.data);
}, 1000);
},
fail: function () {},
});
});
},
// 用户取消录音
cancel() {},
},
};
</script>
<style lang="scss">
.viaTion {
display: flex;
flex-direction: column;
align-items: flex-start;
}
</style>
下载插件 很全面的~