关于Vue使用tinymce富文本框上传本地图片视频心得总结
小华开发日记1使用的是vue-admin里面的应用方式通过scnd来应用具体的操作,自己去看vue-damin中的源码,这里只是介绍文件本地图片视频1.在init中设置file_picker_types: ‘image media’,这里是允许上传图片和视频2.file_picker_callback: function(callback, value, meta) {}添加这个...
·
小华开发日记1
使用的是vue-admin里面的应用方式通过scnd来应用具体的操作,自己去看
vue-damin中的源码,这里只是介绍文件本地图片视频
- 1.在init中设置 file_picker_types: ‘image media’, 这里是允许上传图片和视频
- 2.file_picker_callback: function(callback, value, meta) {}添加这个函数
- 3.(设置完以上2步后就会出现文件上传的图标)
在data()中设置需要上传的文件图片文件地址(resimg)和视频文件地址(resVideo)如下:
data() {
return {
resimg:'', //上传img的url
resVideo:'', //上传视频的url
uploaded:false,//有没有上传完成
hasChange: false,
hasInit: false,
tinymceId: this.id,
fullscreen: false,
languageTypeList: {
'en': 'en',
'zh': 'zh_CN',
'es': 'es_MX',
'ja': 'ja'
}
}
},
在initTinymce中添加回调(tinymce本身是不支持本地的是自己调用函数来促进)
initTinymce() {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
file_picker_types: 'image media',
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
let input = document.createElement('input');//创建一个隐藏的input
input.setAttribute('type', 'file');
// let that = this;
input.onchange = function(){
let file = this.files[0];//选取第一个文件
// console.log(file)
_this.uploadImg(file,'image'); // 上传视频拿到url
if(_this.uploaded){
// _this.resVideo,
console.log(_this.resimg,'true')
callback(_this.resimg) //将url显示在弹框输入框中
}else{
setTimeout(()=>{
//设置几秒后再去取数据
console.log(_this.resimg,'false')
callback(_this.resimg)
},5000)
}
}
//触发点击
input.click();
}
if (meta.filetype == 'media') {
let input = document.createElement('input');//创建一个隐藏的input
input.setAttribute('type', 'file');
// let that = this;
input.onchange = function(){
let file = this.files[0];//选取第一个文件
// console.log(file)
_this.uploadImg(file,'media'); // 上传视频拿到url
if(_this.uploaded){
// _this.resVideo,
console.log(_this.resVideo,'true')
callback(_this.resVideo) //将url显示在弹框输入框中
}else{
setTimeout(()=>{
//设置几秒后再去取数据
console.log(_this.resVideo,'false')
callback(_this.resVideo)
},5000)
}
}
//触发点击
input.click();
}
},
在methods中添加上传的
uploadImg(file,type){
// console.log(token,file,type,)
let content = file
let formData = new FormData();
formData.append('files', content);
axios({
method: "post",
//服务器上传地址
url: ,
data: formData,
headers: {
// 修改请求头
"Content-Type": "multipart/form-data"
}
}).then(res => {
console.log(res);
if(res.data.success){
if(type == 'image') {
this.resimg = res.data.fileUrl
}else if (type == 'media'){
this.resVideo = res.data.fileUrl
}
this.uploaded = true
}
})
},
以下我参考的文章:
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/media'// 插入视频插件
export default{
components:{
Editor
},
data(){
tinymceHtml:'',
qiniuToken:null,//七牛云token
resVideo:null,//七牛云返回的视频url
uploaded:false,//有没有上传完成
editorInit:{
plugins: 'media',
toolbar:'media',
file_picker_types: 'media',
file_picker_callback: (callback, value, meta)=> {
if(meta.filetype == 'media'){
let input = document.createElement('input');//创建一个隐藏的input
input.setAttribute('type', 'file');
let that = this;
input.onchange = function(){
let file = this.files[0];//选取第一个文件
that.uploadImg(that.qiniuToken, file, 'video'); // 上传视频拿到url
if(that.uploaded){
callback(that.resVideo, { title: file.name }) //将url显示在弹框输入框中
}else{
setTimeout(()=>{
callback(that.resVideo, { title: file.name })
},2000)
}
}
//触发点击
input.click();
}
}
}
},
methods:{
// 上传视频拿到url
uploadImg(token,file,type){
......代码......
}
}
}
出自:https://blog.csdn.net/u010007013/article/details/102752497
更多推荐
已为社区贡献3条内容
所有评论(0)