vue2+elementUI+tinymce编辑器上传音频mp3文件
发表于:2023-09-14 18:11:12浏览:343次
百度收录的 Vue2 + Tinymce 上传视频的文章比较多,但是对于上传音频文件用 <audio 标签播放还是比较难找的,而且找到的没有靠谱的,今天通过研究发现解决起来还是比较简单的,因为官方本来就有方案只是我们没有研究透而已,先看看文件上传的:在添加图片快 images_upload_handler:的后面继续添加
file_picker_callback: (callback, value, meta)=> {
if (meta.filetype == 'media'){
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "video/mp4,video/AVI,video/FLV,video/mpeg,audio/mp3");
let that = this;
input.onchange = function(e) {
let file = this.files[0];
const loading = that.$loading({
lock: true,
text: '正在上传视频...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
setTimeout(() => {
that.$nextTick(() => {
document.querySelector(".el-loading-mask").style.zIndex = "99999";
});
});
let ext = file.name.split(".")[1];
if (
ext !== "mp4" &&
ext !== "AVI"&&
ext !== "FLV"&&
ext !== "mpeg"&&
ext !== "mp3"
) {
that.$message.error({message:'上传资源只能是 AVI/FLV/mp4/mpeg/mp3 格式的视频!',duration:5000,customClass:'zZindex'});
return false;
}
// let url = CONSTANT.URL.BASESYS.ADMINUPLOADFILE;
let param = {
suffix:ext, // 文件后缀 png
contentType:file.type // 文件类型 image/png
}
// console.log('shipin',param)
//上传接口
let formdata = new FormData();
formdata.append('file', file)
formdata.append('edit', true)
formdata.append('upload_config_id', that.upload_config_id)
that.$axios.post('/admin/Upload/upload', formdata).then(res => {
// console.log(res)
if(res.status ==200){
loading.close();
callback(res.data.data);
}else {
loading.close();
that.$message(res.data.message)
}
}).catch( err =>{
console.log(err)
that.$message('出错了!');
loading.close()
})
};
input.click();
}
},
video_template_callback: function(data) {
let videoUri = encodeURI(data.source);
return `<p>
<span class="mce-object mce-object-video" data-mce-selected="1" data-mce-object="video" data-mce-p-width="100%"
data-mce-p-height="auto" data-mce-p-controls="controls" data-mce-p-controlslist="nodownload"
data-mce-p-allowfullscreen="true" data-mce-p-src=${data.source}>
<video src=${data.source} width="100%" height="auto" controls="controls" controlslist="nodownload">
</video>
</span>
</p>
<p style="text-align: left;"></p>`
},
audio_template_callback: function(data) {
return `<audio style="width:100%" controls>
<source src=${data.source} type=${data.sourcemime}>
</audio>`;
},
推荐文章
- iframe嵌套微信公众号不显示最佳解决方案,使用cors-anywhere 解决跨域问题
- 谷歌浏览器输入地址后http自动转https解决方法
- PHP正则表达式
- uniapp+thinkphp6开发答题系统 API接口开发签名验证、接口安全验证方法
- Vue Button按钮点击下载文件的方法
- 一组简洁漂亮的错误提示页面401,403,404,405,406,500页面,纯css
- tp8框架中有那些主要异常
- OpenSSH Server 远程代码执行漏洞(CVE-2024-6387)openssh8.8升级到9.8
- 新闻APP源码,新闻门户网站开源系统ThinkPHP6框架UniAPP多端发布
- 微信小程序网络抽奖系统源码,H5在线有奖知识竞赛扫码制作