vue-quill-editor 上传视频

项目需要，看了很多博客，都不太合适，于是东拼西凑的做了这个功能

使用插件：
vue-quill-editor
quill-image-extend-module
BootstrapVue
axios
请自行 install 和 import
先看看效果吧

下面就是代码:

<template><!-- bidirectional data binding（双向数据绑定） --><div class="testFweb_box"><div class="testFweb"><quill-editor v-model="content"value="editorVal"ref="myQuillEditor":options="editorOption"></quill-editor></div><!-- 视频上传 --><div class="floatBox" v-show='upvideoShow'><div class="floatsmBox"><b-form-file accept="video/*" v-model="videofile" ref="videofilereset" placeholder="选择视频文件"></b-form-file><span style="margin-top: 10px;" class="btn btn-outline-success" @click='upVideo'>确认</span><span style="margin-top: 10px;" class="btn btn-outline-success" @click='cancelupVideo'>取消</span></div></div><!-- 图片上传 --><div class="floatBox" v-show='upimgShow'><div class="floatsmBox"><b-form-file accept="image/*" v-model="imgfile" ref="imgfilereset" placeholder="选择图片文件"></b-form-file><span style="margin-top: 10px;" class="btn btn-outline-success" @click='upImg'>确认</span><span style="margin-top: 10px;" class="btn btn-outline-success" @click='cancelupImg'>取消</span></div></div><div style="display: none;" id="upvideoshow" @click='upvideoShow=true'></div><div style="display: none;" id="upimgshow" @click='upimgShow=true'></div><div v-if='showFloat' class='floatBox ub ub_ac ub_pc'><b-progress class='ub_f1 proessBox' :value="jindu" :max="100" show-progress animated></b-progress></div></div>
</template>
<style>.proessBox{max-width: 400px;}.testFweb{width: 800px;margin: 50px auto;}.testFweb_box .custom-file-label::after{content: "选择视频文件";display: none;}.floatsmBox{padding: 20px;background-color: #fff;margin-top: 5%;}.floatBox{position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.2);width: 100%;height: 100%;padding: 0 10%;z-index: 10;}
</style>
<script>import {quillEditor, Quill} from 'vue-quill-editor'import {container} from 'quill-image-extend-module'  export default {components: {quillEditor,},data () {return {showFloat:false,//控制上传进度展示浮层jindu:0,//上传进度upvideoShow:false,//控制上传视频展示upimgShow:false,//控制上传图片展示videofile:'',imgfile:'',content: '',//编辑器内容editorVal:'',editorOption: {modules: {toolbar: {  // 如果不上传图片到服务器，此处不必配置container: [[{'size': ['small', false, 'large', 'huge']}],[{'align': []}],['link', 'image', 'video']],  // container为工具栏，可自行配置handlers: {'image': function () {  // 劫持原来的图片点击按钮事件document.querySelector('#upimgshow').click()},'video':function(val){document.querySelector('#upvideoshow').click()}}}},theme: 'snow',placeholder: '填写内容',}  // 必须初始化为对象 init  to Object}},methods:{cancelupImg(){//取消上传图片 关闭浮层并清除文件this.$refs.imgfilereset.reset();this.upimgShow = false },cancelupVideo(){//取消上传视频 关闭浮层并清除文件this.$refs.videofilereset.reset();this.upvideoShow = false},upImg(){//上传图片var that = thisif(!that.$isDefine(that.imgfile)){that.$alert('请选择图片')}that.jindu = 0that.showFloat = true//随机9位数名称(由于此项目文件是上传到阿里云的oss上面的，所以同一天的同名文件会覆盖，按需添加)var a = that.imgfile.namevar eame = a.split('.')var rnd="";for(var i=0;i<9;i++){rnd+=Math.floor(Math.random()*10);}let param = new FormData(); //创建form对象param.append('img',that.imgfile,rnd+'.'+eame[eame.length-1]);//视频let config = {onUploadProgress: progressEvent => {var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)// console.log('进度值',complete)that.jindu = complete},headers: {'Content-Type': 'multipart/form-data'}}that.axios.post('url',param,config)//url为上传地址.then(response=>{that.$refs.imgfilereset.reset();//清除文件if (response.data.error == '0') {// 获取光标所在位置let quill = that.$refs.myQuillEditor.quilllet length = quill.getSelection().index;// 插入图片  response.data.url为服务器返回的图片地址quill.insertEmbed(length, 'image', response.data.url)// 调整光标到最后quill.setSelection(length + 1)that.showFloat = falsethat.upimgShow = false} else {that.showFloat = falsethat.upimgShow = falsethis.$alert('插入失败,请重试')}}).catch(function(error){that.$alert('插入失败,请重试')that.showFloat = falsethat.upimgShow = false})  },upVideo(){//上传视频var that = thisif(!that.$isDefine(that.videofile)){that.$alert('请选择视频')}that.jindu = 0that.showFloat = true//随机9位数名称(由于此项目的视频是上传到阿里云的oss上面的，所以同一天的同名文件会覆盖)var a = that.videofile.namevar eame = a.split('.')var rnd="";for(var i=0;i<9;i++){rnd+=Math.floor(Math.random()*10);}let param = new FormData(); //创建form对象param.append('video',that.videofile,rnd+'.'+eame[eame.length-1]);//视频let config = {onUploadProgress: progressEvent => {var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)// console.log('进度值',complete)that.jindu = complete},headers: {'Content-Type': 'multipart/form-data'}}that.axios.post('url',param,config)//url为上传地址.then(response=>{that.$refs.videofilereset.reset();//清除文件if (response.data.error == '0') {// 获取光标所在位置let quill = that.$refs.myQuillEditor.quilllet length = quill.getSelection().index;// 插入视频  response.data.url为服务器返回的图片地址quill.insertEmbed(length, 'video', response.data.url)// 调整光标到最后quill.setSelection(length + 1)that.showFloat = falsethat.upvideoShow = false} else {that.showFloat = falsethat.upvideoShow = falsethis.$alert('插入失败,请重试')}}).catch(function(error){that.$alert('插入失败,请重试')that.showFloat = falsethat.upvideoShow = false})  }},}
</script>

注意

$alert();$isDefine()是我自己封装的方法，前者为弹出框，后者为判断字段是否为空、null、undefined等，自行封装

后台返回

成功返回

错误返回
error不为0即可

vue-quill-editor 上传视频相关推荐

antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
html5视频上传云,vue+七牛云上传视频文件
Qiniu-JavaScript-SDK基于七牛云存储官方 API 构建,其中上传功能基于 H5 File API.开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储,并对上传成功后的 ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
vue+elementUI同时上传视频和图片并回显
1.效果 2.数据结构;根据name或url后缀来判断是图片或者视频类型 fileList = [{name:'123.mp4',url:'123.mp4'},{name:'124.png',url: ...
Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...
【前端】wangeditor源码修改，打包发布到npm，实现上传视频功能，得到视频的第一帧保存为封面，spring-boot+vue，axios实现文件上传，视频图片浏览
一.实现 1.创建git分支,clone下源码 git地址创建分支 2.图片上传具有文件选择的功能,所以我完全模仿(抄袭)图片上传报错不慌,全部改完就不报错了 1)在src/config/inde ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...

vue-quill-editor 上传视频

注意

后台返回

vue-quill-editor 上传视频相关推荐

最新文章

热门文章