使用vue和element组件实现语音的上传和播放功能
迪丽瓦拉
2024-05-28 22:31:49
0

上传音频其实和上传图片差不多。

html

    点击上传        

js

 // 音频上传成功    handleReplaceAvatarSuccess(res, file, fileList) {this.audioFlag = false;      this.audioUploadPercent = 0;      if(res.code == 200){           this.audioForm.voiceUrl = process.env.VUE_APP_BASE_API + res.fileName;          this.audioForm.voiceName = fileList[0].name}else{          this.$message.error('视频上传失败,请重新上传!');     }    },   //进度条      uploadVideoProcess(event, file, fileList) {        this.audioFlag = true;        this.audioUploadPercent = file.percentage.toFixed(0) * 1;    },    
/**上传文件限制--只能上传mp3格式的文件 */    
beforeAvatarUpload(file) {       const isLt10M = file.size / 1024 / 1024  < 50;        if (['audio/mp3','audio/mpeg'].indexOf(file.type) == -1) {this.$message.error('请上传正确的音频格式');                return false;       }        if (!isLt10M) {            this.$message.error('上传音频大小不能超过50MB哦!');            return false;       }},

这是上传前的样式:

这是上传后的样式

如果有不需要的逻辑或其它东西可以进行删除,html里面也有一些多余的东西,不需要删除就可以了。

相关内容