wangeditor上传视频

wangeditor安装及文档 用于 Vue React | wangEditor

 这种视频上传的感觉都需要一个预览服务，如果后端的下载何上传接口只有流的操作，这个富文本里拼接这些感觉有点困难，暂时不知道怎么做，有大佬知道怎么做的话可以留言

<template>
  <div style="border: 1px solid #ccc;border-radios:4px">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="content"
      style="min-height: 300px; overflow-y: hidden;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
  components: { Editor, Toolbar },
  data() { 
    // 自定义插入图片/视频
    return {
      editor: null,
      content: '',
      toolbarConfig: { 
        excludeKeys: [
          // 排除菜单组，写菜单组 key 的值即可
          // 'group-video', //去掉视频
          'fullScreen',
          // 'insertTable',
          'insertImage',
          'insertVideo',
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {   //上传图片配置
            // customUpload: handleUpload,// 这里我直接把图片上传弄成base64，但是视频不支持直接上传base64
            base64LimitSize: 1024 * 1024 * 1024 // 5kb  
          },
          uploadVideo: {  //上传视频配置
            customUpload: this.handleUpload
          },
        }
      },
      mode: 'default', // or 'simple'
      video:''
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    async handleUpload (file, insertFn) {
      let form = new FormData();
      form.append('files', file);
      let res = await this.uploadFile(form);  //此方法返回上传后的id
      const videoUrl = URL.createObjectURL(file);
      // this.content += '<video  poster=\"\"  controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"'+ res +'\" type=\"video/mp4\"/></video>'
      // 这快需要注意一下，我这res返回这快，应该是后端返回一个预览服务的url，才能直接在富文本，以及后续展示的地方展示这个视频
      this.content += '<video  poster=\"\"  controls=\"true\" width=\"auto\" height=\"auto\"><source src=\" http://172.16.100.93:8080/downloadFile/'+ res.data +'\" type=\"video/mp4\"/></video>'
      // 如果没有预览服务可以让后端写一下下载接口，然后在这里直接拼，但是这个接口前缀最好使用项目中接口配置的前缀
    },
    async uploadFile (form) {
      console.log('uploadFile');
      let res = await this.$api.uploadNewsFile(form);   //此处换为自己的上传接口地址
      return res.data
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
      });
    },
    fileToBlob(file) {
      let reader = new FileReader();
      reader.addEventListener('load', (e) => {
        let base64 = e.target.result;
        let blob = new Blob([base64], { type: file.type });
        console.log('Blob对象', blob);
      })
      reader.readAsDataURL(file)
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.content = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    // }, 1500)
    const editor = this.editor // 获取 editor 实例
    if (editor == null) return
    editor.insertText('一段文字')
    console.log(editor.children)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>