vue quill editor 使用富文本添加上传音频功能使用富文本添加上传音频功能
vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求。这篇文章主要介绍了vue-
quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
1. 前言前言
vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求。但是,最近项目中,需要在富文本中上传
音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传;所以这个功能需要自定义。
怎么实现这个功能?
写一个只能上传音频的组件,并且隐藏
在富文本插件的toolbar定义一个按钮,点击时调用上传组件
监听上传成功的回调函数,在富文本输入框中插入音频标签
2. 功能实现功能实现
2.1 基于Element-ui实现上传组件,并且隐藏(不能让用户点击)
<!--
首先,必须隐藏这个元素:display:none;
v-loading.fullscreen.lock:设置上传时显示loading,值为true/false;
action:设置上传的地址;
before-upload:上传前的钩子函数,验证是否为音频文件;
on-success:上传成功的钩子函数;
on-progress:上传时的钩子函数,设置显示loading
-->
<div style="display:none">
<el-upload
v-loading.fullscreen.lock="fullscreenLoading"
:action="actionUrl"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-progress="uploadIng"
>
<el-button size="small" class="uploadVoiceBtn" type="primary">upload</el-button>
</el-upload>
</div>
对应的钩子函数:
actionUrl:直接根据后台接口赋值即可
beforeUpload:验证是否为音频
beforeUpload(file){
// file.type好像只能返回图片的格式,其他的将会是 "", 所以需要自己获取后缀名判断文件格式
let pointIndex = file.name.lastIndexOf(".");
let fileType = file.name.substring(pointIndex+1); //获取到文件后缀名
// if (fileType !== 'mp3' && fileType !== 'ogg' && fileType !== 'wav') {
if (fileType !== 'mp3' && fileType !== 'ogg') {
this.$message.error('你选择的文件不是音频哦,仅支持mp3和ogg格式')
return false
}
},
handleSuccess:上传成功的回调,主要功能实现的地方,后面介绍
uploadIng:设置显示loading
uploadIng(){ //上传时显示loading
this.fullscreenLoading = true
}
2.2 在富文本插件的toolbar定义一个按钮,点击时调用上传组件
注意:vue-quill-editor是基于quill富文本的二次封装(源码可以很容易看出来),所以需要看配置方法的直接去看quill即可
A. 修改 editorOption 配置,添加一个按钮:
//富文本设置
editorOption: {
modules: {
..., //其他配置,如quill-image-extend-module
toolbar: {
container: [
评论0